Slider de carregamento horizontal

Parece ótimo!

Ao clicar em links neste menu (fora dos menus suspensos), o spinner ainda aparece:

1 curtida

Atualmente está definido como 2px, mas se você estiver usando uma tela hidpi com escala (por exemplo, um MacBook Retina), pode acabar ficando mais próximo de 1px na sua tela. Vou aumentar para 3px hoje.

Você tem razão, isso é um pouco inconsistente em termos de UX no momento. É uma questão complicada do ponto de vista técnico. O slider de carregamento está atualmente conectado ao roteador do Ember, então ele só aparece nas transições de rota do Ember. Alguns estados de “carregamento” dentro da interface não são, na verdade, transições de rota do Ember… precisarei pensar em como podemos tornar isso mais consistente.

9 curtidas

Estou muito ansioso pelo suporte a DPI alto. Talvez dar aos administradores do site a opção entre o controle deslizante de carregamento e, quem sabe, um círculo giratório renovado (tosse tosse :wink:)?

1 curtida

Agora foi aumentado para 3px, então deve ficar um pouco mais óbvio.

Os administradores podem personalizar tudo por meio de um componente de tema, então, se os sites quiserem manter um spinner de carregamento, isso será possível :slight_smile:

12 curtidas

@meghna publicou Custom Loading Spinner Component, que é uma ótima maneira de aproveitar os ícones SVG do FontAwesome, que funcionam em todos os níveis de DPI.

7 curtidas

Eu amo isso e concordo com @codinghorror de que deveria ser movido para o núcleo como padrão.

20 curtidas

Acho que resolvi esse problema: o ícone de carregamento deve ter desaparecido de todas as visualizações da lista de tópicos.

9 curtidas

No iPad, o slider de carregamento não aparece de forma alguma. (iPad de 5ª geração… acho. iOS 14, aplicativo DiscourseHub)

image

Veja o GIF acima

5 curtidas

Ótima observação, obrigado @CaptainZac. Fiz alguns ajustes para que agora funcione na visualização PWA/DiscourseHub no iPad.

Também adicionei o valor de top de 1px que precisamos para o DiscourseHub no iPhone. A altura total de 3px agora está visível no aplicativo e parece combinar razoavelmente bem com o próprio slider do DiscourseHub.

7 curtidas

Gosto muito :+1: Muito bom trabalho! :slightly_smiling_face:

2 curtidas

Parece que o slider de carregamento não é ativado em vez do loader de spinner na página inicial ao clicar no logotipo.

4 curtidas

Perfeito, comece a usá-lo - obrigado!

2 curtidas

Deveria estar resolvido agora, obrigado!

7 curtidas

O problema com os carrosséis é que eles podem realmente parecer mais lentos (mesmo que a página carregue mais rápido).

O motivo disso é que nada acontece na maior parte da página até que ela termine de carregar — isso contrasta com a versão com o spinner de carregamento, onde a página fica em branco imediatamente após o clique, ou seja, algo significativo acontece imediatamente versus algo significativo acontecer após um atraso.

6 curtidas

Sim, isso é verdade, e é algo que também temos discutido internamente. Manter todo o conteúdo antigo na tela significa que não há feedback imediato após clicar em um link. Acabei de aplicar uma alteração que (parcialmente) faz o conteúdo da página desaparecer gradualmente durante o carregamento. (cc @awesomerobot)

Originalmente, eu tinha configurado para desaparecer completamente, mas aí ficávamos apenas com uma página em branco. Acredito que manter em 20% de opacidade poderia ser um bom meio-termo. Feedback suficiente, mas não tão brusco? :thinking:

No momento, ele está fazendo desaparecer todo o #main-outlet. Infelizmente, não acho que haja como direcionar o {{outlet}} da rota que está sendo carregada… mas adoraria estar errado. Acredito que a única solução seria substituir todos os {{outlet}}s no nosso código por algum componente de wrapper personalizado…

18 curtidas

Ficando cada vez melhor… :sunglasses:

7 curtidas

Jogando no próximo nível: registre quanto tempo as requisições levam em média e faça a animação de desaparecimento durar o mesmo tempo :rofl:

14 curtidas

Ótimo. Parece muito melhor. :100::+1:

3 curtidas

É melhor, David… mas ainda ‘parece’ mais lento. Não tenho certeza de que isso mudará, a menos que o efeito seja tão marcante quanto o do spinner, para ser sincero. Também pode ser apenas uma característica do slider, especialmente se ele sempre for concluído. Isso ocorre porque a página terá terminado de carregar (ou parecerá ter terminado de carregar) antes que o slider termine… e, no entanto, é o slider que será o indicador do carregamento da página e não a própria página, pois ele é muito notável.

6 curtidas

https://meta.discourse.org/u/golaxo/summary
Se clicarmos de uma visualização de perfil para o logotipo do Discourse, a parte superior desaparece, o que parece estranho.

3 curtidas