Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace spin.js with a CSS-only loading spinner #2764

Merged
merged 5 commits into from
Apr 8, 2021

Conversation

davwheat
Copy link
Member

@davwheat davwheat commented Apr 5, 2021

Progresses flarum/issue-archive#179

Changes proposed in this pull request:

  • Replaces spin.js with a CSS-only loading spinner

Reviewers should focus on:
This might be extension-breaking depending on how exts use the current loading spinner.

We might also need to make changes to how core exts use the Loading Spinner to make it render correctly. The main difference is how we set a custom height for the spinner container -- this needs to be done on a new class (.LoadingSpinner-container) instead of just .LoadingSpinner. This is because of how the spinner is created using styles.

Screenshot
2my1aEkD
d57Y8r1h
FS1Qwh7r

Confirmed

  • Frontend changes: tested on a local Flarum installation.

@askvortsov1
Copy link
Member

Is it just me, or does this spinner look different from the old one? Especially for the loading switch; that seems to block out the switch component completely?

@davwheat
Copy link
Member Author

davwheat commented Apr 6, 2021

It does. There's no easy way to recreate the look of the spin.js spinner.

What do you mean about blocking the switch? When the spinner shows, the switch should be disabled anyway -- changing it while it's loading causes state mismatch between the DB and frontend.

@tankerkiller125
Copy link
Contributor

I'm fine with the slight look change, and as for blocking the checkbox I'm also fine with that as it seems like good UI to me to prevent state mismatches and other issues.

@davwheat
Copy link
Member Author

davwheat commented Apr 6, 2021

It doesn't actually block the switches, it just displays the spinner on top. You can still toggle it underneath unless protection is put into place in the JS to prevent it.

Copy link
Member

@askvortsov1 askvortsov1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps I'm missing something, but where is the actual design of the spinner coming from?

Also, random idea, but could it be possible to use a fontawesome icon, and rotate that?

js/src/common/components/LoadingIndicator.tsx Outdated Show resolved Hide resolved
@davwheat
Copy link
Member Author

davwheat commented Apr 6, 2021

The design comes from the border. The indicator is a square, which gets given border radius 50% to effectively become a circle.

We stick a border on all sides, except the top, of @muted-color, then the top is given a color of transparent to prevent weird issues with CSS borders being diagonal.

It's be possible to use FontAwesome, but I prefer this way as it's easier to customise in my opinion.

Diagram

2021_04_06 21_56 Office Lens.jpg

Copy link
Member

@askvortsov1 askvortsov1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's be possible to use FontAwesome, but I prefer this way as it's easier to customise in my opinion.

Could you elaborate on this? It feels like we're putting in a lot of code for this particular implementation that would need to be overriden completely given a different design

js/src/common/components/LoadingIndicator.tsx Outdated Show resolved Hide resolved
@davwheat
Copy link
Member Author

davwheat commented Apr 8, 2021

@askvortsov1 The main reason is the fact that there's only one loading-like FA icon we could use, which is circle-notch.

If anyone wanted to change this for their theme, there would be no easy way to do so, except overriding CSS and changing the content property to show a different icon instead, like what giffgaff had to do for the FoF upload button to show an image icon instead of a file upload icon. Personally, I don't think that's very theme-friendly. (This could be done in JS, but my motto says use CSS where you can!)

Using this method, anyone could just override the border-radius and border and set a background image, or use content and font-family to set an FA icon, if they really wanted to.

I also just really hate the look of circle-notch, too.

FontAwesome circle-notch icon

@davwheat davwheat force-pushed the dw/2345-use-custom-loading-spinner branch from 94a1af3 to 457cf30 Compare April 8, 2021 11:48
@tankerkiller125
Copy link
Contributor

I much prefer the CSS implementation of the circle over anything font-awesome.

@askvortsov1
Copy link
Member

Using this method, anyone could just override the border-radius and border and set a background image, or use content and font-family to set an FA icon, if they really wanted to.

Makes sense to me! Maybe we could add this info in a docblock in the component class?

@davwheat
Copy link
Member Author

davwheat commented Apr 8, 2021

@askvortsov1 Done! :)

@davwheat davwheat merged commit f76524a into master Apr 8, 2021
@davwheat davwheat deleted the dw/2345-use-custom-loading-spinner branch April 8, 2021 23:42
@davwheat davwheat mentioned this pull request May 9, 2021
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants