Componente de Spinner de Carregamento Personalizado

Componente de tema
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 curtidas
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 curtidas
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 curtidas
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 curtidas
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 curtidas
6

Brilliant! Thank you @meghna :heart_eyes:

9 curtidas
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 curtida
8

Por favor, atualize, pois não está mais funcionando com 3.2.0.beta2-dev.

Ele está dando erro no console do Chrome @meghna

9

Testando isso usando Ubuntu com o navegador Chrome mais recente, estou recebendo o seguinte erro no meu site de desenvolvimento local:

component-templates.js:54 [discourse/theme-10/discourse/templates/components/conditional-loading-spinner] conditional-loading-spinner foi criado usando gjs e seu template não pode ser substituído. Ignorando substituição.

No meu site de produção, também testando com o navegador Chrome mais recente no Ubuntu, não estou recebendo erros, mas também não estou vendo um spinner de carregamento.

Acho que algumas alterações foram feitas na forma como os templates são substituídos em temas desde que este componente de tema foi lançado: (not recommended) Overriding Discourse templates from a Theme or Plugin. Acho que a forma como o Discourse implementa o spinner de carregamento também mudou desde então.

3 curtidas
10

@meghna isso será corrigido ou está quebrado agora?:thinking:

1 curtida
11

Espere um pouco. A equipe esteve reunida em sua reunião anual e pode ter outras prioridades ao retornar ao trabalho esta semana.

2 curtidas
12

A correção exige algumas alterações no núcleo. Estamos trabalhando nisso e corrigiremos em breve.

3 curtidas
13

Obrigado pelo trabalho árduo :smiley: :heart:

14

Este componente de tema foi atualizado para funcionar na versão mais recente do Discourse (cortesia de @cvx).

4 curtidas
15

Ainda não está funcionando para mim. :confused:

Editar; Funcionando agora depois de atualizar o discourse hoje.

16

Pensando em usar um ícone svg em vez do FontAwesome. Obrigado de qualquer forma.

17

Parou de funcionar com a versão mais recente. 3.2.0.beta4-dev

(24532653e6)

18

Isso parece bom para mim com a versão mais recente :thinking:

19

Sim, funciona em alguns lugares, mas não em posts, quando você clica em outro post para vê-lo. não funciona agora.

2 curtidas