Benutzerdefinierter Loading Spinner Component

Themenkomponente
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 „Gefällt mir“
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 „Gefällt mir“
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 „Gefällt mir“
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 „Gefällt mir“
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 „Gefällt mir“
6

Brilliant! Thank you @meghna :heart_eyes:

9 „Gefällt mir“
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 „Gefällt mir“
8

Bitte aktualisieren Sie, es funktioniert nicht mehr mit 3.2.0.beta2-dev.

Es gibt einen Fehler in der Chrome-Konsole @meghna

9

Beim Testen unter Ubuntu mit dem neuesten Chrome-Browser erhalte ich auf meiner lokalen Entwicklungsseite folgenden Fehler:

component-templates.js:54 [discourse/theme-10/discourse/templates/components/conditional-loading-spinner] conditional-loading-spinner wurde mit gjs erstellt und seine Vorlage kann nicht überschrieben werden. Überschreiben wird ignoriert.

Auf meiner Produktionsseite, ebenfalls getestet mit dem neuesten Chrome-Browser unter Ubuntu, erhalte ich keine Fehler, sehe aber auch keinen Lade-Spinner.

Ich glaube, dass seit der Veröffentlichung dieser Theme-Komponente einige Änderungen daran vorgenommen wurden, wie Vorlagen in Themes überschrieben werden: (not recommended) Overriding Discourse templates from a Theme or Plugin. Ich glaube auch, dass sich die Art und Weise, wie Discourse den Lade-Spinner implementiert, seitdem geändert hat.

3 „Gefällt mir“
10

@meghna wird das behoben oder ist es jetzt kaputt?:thinking:

1 „Gefällt mir“
11

Bitte warten Sie einen Moment. Das Team war auf seiner Jahrestagung und hat möglicherweise andere Prioritäten, wenn es diese Woche wieder an die Arbeit geht.

2 „Gefällt mir“
12

Die Korrektur erfordert einige Änderungen im Kern. Wir arbeiten daran und werden es bald beheben.

3 „Gefällt mir“
13

Vielen Dank für die harte Arbeit :smiley: :heart:

14

Diese Theme-Komponente wurde aktualisiert, um mit der neuesten Discourse-Version zu funktionieren (mit freundlicher Genehmigung von @cvx).

4 „Gefällt mir“
15

Bei mir funktioniert es immer noch nicht. :confused:

Bearbeiten; Funktioniert jetzt, nachdem ich Discourse heute aktualisiert habe.

16

Ich überlege, ob ich anstelle von FontAwesome ein SVG-Symbol verwenden soll. Danke trotzdem.

17

Funktioniert mit der neuesten Version nicht mehr. 3.2.0.beta4-dev

(24532653e6)

18

Das sieht für mich mit der neuesten Version gut aus :thinking:

19

Ja, es funktioniert an einigen Stellen, aber nicht in Beiträgen, wenn man auf einen anderen Beitrag klickt, um ihn zu sehen. Es funktioniert jetzt nicht mehr.

2 „Gefällt mir“