Custom Loading Spinner Component

Theme component
1

While working on the Grogu theme I implemented a custom loading icon for that theme and thought it would be cool to have a standalone component to customize the loading spinner icon.

This component allows staff to customize the default spinning icon. There are three customization options available via theme settings:

  • icon name
  • icon size
  • icon color

The component only accepts FontAwesome icon name and I recommend picking one of these icons to get awesome spinning effect.

Enjoy, and do let me know how to further improve this component. :slight_smile:
:sunglasses: Preview Preview on theme creator
:link: Github Repo discourse-custom-loading-spinner
:hammer_and_wrench: Install Guide How to install a theme or theme component
25 Likes
2

Hello just installed this! An improvement that you could make is to add another colour for dark theme as the colour you choose for light such as #000000 will not be seen on a dark theme.

6 Likes
3

That’s exactly why the color is customizable via theme setting custom icon color.

Screenshot 2021-01-02 at 8.26.49 PM
Screenshot 2021-01-02 at 8.26.49 PM1336×516 20.8 KB

4 Likes
4

No what I mean is that is that the icon colour should invert depending on whether you are on a light or dark theme automatically.

My light theme background is #F0F0F0 and my dark theme background is #000000

Therefore it is difficult to find a colour that contrasts well. I want it to be a white icon on dark theme and a black one on light theme.
Thanks :wink:

4 Likes
5

For automatic icon colour switching based on theme colours – do not specify any value in custom icon color theme setting.

I have now made this default behaviour via:

12 Likes
6

Brilliant! Thank you @meghna :heart_eyes:

9 Likes
7

I love this theme-component, and it works great on the home page. However, in some areas of my discourse instance, it shows the default loading spinner. For example, whenever I’m in the admin panel or user settings. @meghna Any way this can be fixed?

1 Like
8

Please update it is not working any longer with 3.2.0.beta2-dev.

It’s gives error in chrome console @meghna

9

Testing this using Ubuntu with the latest Chrome browser, I’m getting the following error on my local dev site:

component-templates.js:54 [discourse/theme-10/discourse/templates/components/conditional-loading-spinner] conditional-loading-spinner was authored using gjs and its template cannot be overridden. Ignoring override.

On my production site, also testing with the latest Chrome browser on Ubuntu, I’m not getting errors, but also am not seeing a loading spinner.

I think some changes have been made to how templates get overridden in themes since this theme component was released: Overriding Discourse templates from a Theme or Plugin. I think the way Discourse implements the loading spinner has also changed since then.

3 Likes
10

@meghna this will get fixed or it’s broken now?:thinking:

1 Like
11

Hang on for a bit. The team has been away at their yearly meeting and might have other priorities when they start getting back to work this week.

2 Likes
12

The fix require some changes in core. We are working on it and will get it fixed soon.

3 Likes
13

Thank you for the hard work :smiley: :heart:

14

This theme component is updated to work on latest Discourse version (courtesy of @CvX).

4 Likes
15

Still, not working for me. :confused:

Edit; Working now after updating discourse today.

16

Wondering about using an svg-icon in place of FontAwesome. Thanks either way.

17

Stopped working with the latest version. 3.2.0.beta4-dev

(24532653e6)

18

This looks fine to me with the latest version :thinking:

19

Yes, it works in some places, but not in posts, when you click some other post to see it. it doesn’t work now.

2 Likes