Replace spin.js with a CSS-only loading spinner

[davwheat]

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

Confirmed

• Frontend changes: tested on a local Flarum installation.

[askvortsov1]

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]

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]

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]

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.

[askvortsov1]

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?

[davwheat]

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

[askvortsov1]

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

[davwheat]

@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.

[tankerkiller125]

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

[askvortsov1]

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]

@askvortsov1 Done! :)