Componente de Spinner de Carga Personalizado

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:

25 Me gusta

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 Me gusta

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

4 Me gusta

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 Me gusta

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 Me gusta

Brilliant! Thank you @meghna :heart_eyes:

9 Me gusta

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 me gusta

Por favor, actualízalo, ya no funciona con 3.2.0.beta2-dev.

Da error en la consola de Chrome @meghna

Probando esto en Ubuntu con el navegador Chrome más reciente, estoy recibiendo el siguiente error en mi sitio de desarrollo local:

component-templates.js:54 [discourse/theme-10/discourse/templates/components/conditional-loading-spinner] conditional-loading-spinner fue creado con gjs y su plantilla no puede ser anulada. Ignorando anulación.

En mi sitio de producción, también probando con el navegador Chrome más reciente en Ubuntu, no estoy recibiendo errores, pero tampoco estoy viendo un indicador de carga.

Creo que se han realizado algunos cambios en la forma en que se anulan las plantillas en los temas desde que se lanzó este componente de tema: (not recommended) Overriding Discourse templates from a Theme or Plugin. Creo que la forma en que Discourse implementa el indicador de carga también ha cambiado desde entonces.

3 Me gusta

@meghna ¿esto se arreglará o está roto ahora?:thinking:

1 me gusta

Espera un poco. El equipo ha estado fuera en su reunión anual y puede tener otras prioridades cuando comience a volver al trabajo esta semana.

2 Me gusta

La corrección requiere algunos cambios en el núcleo. Estamos trabajando en ello y lo solucionaremos pronto.

3 Me gusta

Gracias por el arduo trabajo :smiley: :heart:

Este componente temático se actualiza para funcionar en la última versión de Discourse (cortesía de @cvx).

4 Me gusta

Aún no me funciona. :confused:

Editar; Ya funciona después de actualizar Discourse hoy.

¿Te preguntas si usar un icono svg en lugar de FontAwesome? Gracias de todos modos.

Dejó de funcionar con la última versión. 3.2.0.beta4-dev

(24532653e6)

Esto me parece bien con la última versión :thinking:

Sí, funciona en algunos lugares, pero no en las publicaciones, cuando haces clic en otra publicación para verla. ahora no funciona.

2 Me gusta