Custom Loading Spinner Component

Customization Theme component

AI-generated summary

Custom Loading Spinner Component Discussion Summary

The discussion revolves around a custom loading spinner component created by meghna for Discourse themes. The component allows customization of the loading icon via theme settings, including icon name, size, and color.

Ondrej suggested adding automatic color inversion for light and dark themes, which meghna implemented.

However, users reported issues with the component, including:

  • MrDavis97 encountered the default loading spinner in certain areas of their Discourse instance.
  • Kynic reported an error with Chrome console after updating to 3.2.0 beta2-dev.
  • Simon experienced issues with template overriding and loading spinner visibility.

Meghna acknowledged the issues and stated that a fix would require changes in the core, which are being worked on. Kynic reported that the issue persisted with the latest version (3.2.0.beta4-dev).

However, Arkshine confirmed that the component works fine with the latest version, and Kynic clarified that the issue occurs only in certain situations, such as when clicking on another post.

Update: Meghna announced that the component has been updated to work with the latest Discourse version.

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
26 Likes
How to use Font Awesome pulse as the loading icon?
Horizontal loading slider
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:

https://github.com/MeghnaAJ/discourse-custom-loading-spinner/commit/1f404c9c32aa846e85e2dc8986dc5c012ae40fba

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: (not recommended) 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.

3 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:

1 Like
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