Já vi outros sites manterem a página atual totalmente visível enquanto a outra carrega e a barra de carregamento avança pela tela. Talvez valha a pena testar essa versão.
8 curtidas
Quero adicionar mais uma coisa. Acredito que notei outra grande diferença entre o Discourse e alguns outros sites que usam um indicador de carregamento. Os três sites com os quais estou comparando são https://www.youtube.com, https://github.com e https://bookmeter.com. Aqui estão as principais diferenças:
- Como mencionado em minha postagem anterior, em vez de substituir o conteúdo por uma página em branco, esses sites mantêm o conteúdo anterior na tela (sem desvanecimento ou qualquer efeito) até que o novo conteúdo seja carregado.
- Geralmente, muito mais conteúdo permanece na tela mesmo após o carregamento da nova página. Esses sites têm muito mais conteúdo no menu superior e, às vezes, até um menu secundário no topo que pode permanecer, dependendo de qual link foi clicado. Eles também possuem menus laterais que, às vezes, também permanecem após navegar para uma nova página. Por outro lado, o Discourse tem um menu superior muito simples, e apenas o ícone de pesquisa, o ícone de menu hambúrguer e o ícone de usuário permanecem sempre.
Talvez mudar o comportamento para manter o conteúdo antigo até que o novo esteja pronto funcione bem. Mas também é possível que não funcione bem simplesmente porque tanto conteúdo está sendo substituído, não importa para onde você navegue no Discourse.
7 curtidas
No meu caso, utilizo banners de categoria, banners de tag e uma barra lateral exibindo categorias nas listas de tópicos. O Discourse também possui, por padrão, algumas rotas que mantêm as barras superior ou lateral, como perfis de usuário ou grupos. Eu prefiro muito manter a visualização anterior antes da transição, para que esses elementos na tela não desapareçam apenas para reaparecer no mesmo lugar.
7 curtidas
Sim, é assim que usamos o novo componente de tema de slider do Discourse há cerca de uma semana, e realmente gostamos. Simplesmente desativamos o código de transição do corpo e usamos apenas o slider.
A ação natural do navegador ao carregar (ou recarregar) uma página cuida da transição; portanto, não é necessário nenhum código adicional para desvanecer ou ocultar qualquer HTML. Este slider fica ótimo sem nenhum código adicional de transição de página (desvanecimento, ocultação, etc.) e é assim que temos operado em nosso site há uma semana.
Obrigado por esse ótimo slider e pela capacidade de personalizá-lo como um componente de tema!
4 curtidas
Talvez você tenha interpretado mal o que escrevi, mas o que descrevi não é como o Discourse funciona atualmente com o componente de tema. No momento, o Discourse deixa a maior parte do conteúdo em uma página em branco enquanto o novo conteúdo está sendo carregado. Os outros sites que vinculei mantêm o conteúdo atual enquanto o novo conteúdo está sendo carregado. Isso não é a mesma coisa.
1 curtida
Tenho quase certeza de que entendi exatamente o que você mencionou, @seanblue (acima). É bastante simples o que você disse, e, na minha opinião, sua postagem foi fácil de entender.
Se você comentar a transição do corpo em SCSS (a animação) no componente do tema deslizante original do Discourse (apenas para informação, eu modifiquei o componente do tema fazendo um fork dele há uma semana, mas existem outras maneiras de modificar um componente de tema).
Então, o comportamento é exatamente como você descreveu.
A página atual (na nossa modificação) é exibida enquanto o novo conteúdo é carregado (o que é simplesmente o comportamento normal de uma página sendo carregada sem nenhuma animação de corpo adicionada). O “desvanecimento” e o “apagamento” que você vê nas experiências atuais do Discourse foram causados por código de animação CSS do corpo na versão do tema (veja abaixo) quando foi lançado há uma semana.
Sem a animação CSS do corpo, o slider de carregamento segue seu curso normal e não há “apagamento” ou “desvanecimento” do corpo porque essa animação foi especificada no CSS do componente do tema (original). A maioria dos sites (como você menciona) não adiciona animação adicional ao corpo, e é por isso que você disse:
Isso é “o normal”… o que acontece após a remoção da animação do corpo do CSS (estou falando do lançamento de uma semana atrás, pois não tenho acompanhado, ou seja, o GitHub diz que nossa versão modificada é:
Depois de fazermos essa mudança, há uma semana, o slider ficou ótimo (assim dizem nossos usuários) e não requer nenhuma animação adicional do corpo (entradas ou saídas de desvanecimento, animações de apagamento, etc.).
Abaixo estava o CSS que comentamos na “lançamento inicial” deste legal slider. Isso funcionou tão bem para nós (e nossos usuários amam), então não temos seguido todas as mudanças subsequentes de código de experimentação de animação de “spinners combinados, apagamento” do corpo, exceto pelos resultados que vejo com experimentos no meta).
// body #main-outlet {
// transition: opacity 0.2s ease;
// }
// body.loading #main-outlet {
// opacity: 0.2;
// transition: opacity var(--loading-duration) ease;
// }
Espero que ajude.
5 curtidas
Ah, não percebi que você estava usando uma versão modificada/fork. Minha culpa. Fico feliz que essa versão esteja funcionando bem para você. Torço para que eles tentem essa abordagem aqui no Meta em breve.
6 curtidas
@david / @awesomerobot Sei que já debatemos isso várias vezes, mas acho que deveríamos testar a implementação original (com pequenos ajustes) antes de fazer um fade. Deixe-me resumir as opções que temos ao clicar:
-
Manter o conteúdo antigo na tela e alternar para o novo assim que estiver pronto.
-
Renderizar uma “tela branca” e alternar para o novo conteúdo assim que estiver pronto.
-
Fazer uma transição para conteúdo opaco (entre 0% e, digamos, 40%) e alternar para o novo conteúdo assim que estiver pronto.
Com todas essas opções, também concordamos em adicionar: “Se o conteúdo demorar mais de 2 segundos, exibir um spinner”.
(1) é a única solução que minimiza os estados de transição. Sim, há um período de adaptação: “Ei, cliquei em algo e nada parece ter acontecido”. Mas é assim que a web funciona mesmo ao clicar em um hiperlink. O navegador não exibe uma tela branca nem faz um fade ao clicar em um link para outro site.
(2) é o que temos agora e é considerado agressivo por alguns, pois uma das maiores vantagens desse padrão é evitar telas brancas. É apenas uma mudança muito, muito pequena em relação ao spinner antigo.
(3) pode ser muito distrativo; encontrar a opacidade ideal é difícil. Pela minha experiência, quando tentei, tornou-se extremamente cansativo após 1 hora de uso.
@david, demos uma chance adequada à opção (2). Podemos agora testar a opção (1) por uma semana? Acho que provavelmente é a melhor, pois minimiza as mudanças na tela.
9 curtidas
Isso… não é verdade. Há uma animação de carregamento que começa imediatamente ao clicar. Observe a aba do seu navegador ao clicar em um link. Note que, ao clicar ou tocar, ela imediatamente alterna do ícone do site para o ícone de carregamento.
5 curtidas
Desculpe, sim, esse foi o meu ponto aqui: podemos simular algo muito próximo da navegação “padrão” (por exemplo, podemos alterar o ícone da aba durante o carregamento, podemos alterar o texto da aba).
Quando você clica em um link arbitrário em um site, a página atual não fica 100% branca, nem se torna opaca. O conteúdo antigo permanece na tela por um período de tempo até que o DNS resolva o novo site e o conteúdo esteja pronto para ser renderizado.
Para mim, o grande poder desse componente está na redução dos estados intermediários. Se pudermos fazer com que “pareça” navegação padrão do navegador ao fingir, seria ótimo.
12 curtidas
Sem problemas. Nós realmente gostamos do slider (com alguns pixels adicionais para desktop); mas descobrimos que não havia necessidade de animações no corpo da página (branqueamento, fade in/out ou outras).
O slider indica o carregamento de forma adequada; e a página carrega e muda naturalmente, sem a necessidade de adicionar CSS de transição no corpo ou spinners extras. Estamos rodando assim há 8 ou 9 dias agora, os usuários estão satisfeitos e eu também gosto. Os usuários não gostaram das animações de “fade in/out”, nem das animações de “branqueamento da página”, nem do “spinner adicional + animação do slider”; mas, por outro lado, nossos usuários não são fãs de animações desnecessárias e de web-gizmos extras em geral.
Espero que a equipe do Meta mantenha esse código como um componente de tema, ou pelo menos permita que os donos de sites continuem substituindo o que for decidido; já que parece que o que nossos usuários gostam e o que outros gostam, no que diz respeito a transições de página, são diferentes.
Na dúvida, “ser suave e dar aos sites a capacidade de escolher” é uma boa abordagem, na minha opinião.
3 curtidas
parece bom, reverti o componente para a implementação original
7 curtidas
Acho que o “oh não, 2 segundos se passaram, mostrar um spinner” é definitivamente algo pequeno, mas importante a ser adicionado.
Exceto por isso, vamos ver o que as pessoas dizem. Acredito que esta seja provavelmente a versão que lançaremos.
8 curtidas
Onde deve ser exibido? Como algum tipo de modal? Ou o #main-outlet deve ser ocultado após 2s para dar lugar a um spinner?
4 curtidas
Estou pensando em ocultar a saída principal. Talvez queiramos ajustar o limite; 2 é um pouco arbitrário, talvez 3, 4 ou 5?
6 curtidas
O spinner será exibido agora após 2 segundos:
12 curtidas
Isso é muito legal! Sem a camada adicional de carregamento após 2 segundos, a experiência dos usuários ficaria estranha. Assim, temos o melhor dos dois mundos: 1. Simulando ser extremamente rápido graças ao slider (estamos trapaceando aqui, TBO). 2. Preenchendo a lacuna caso o carregamento trave. (Transição psicológica)
Muito bem feito! 
8 curtidas
Acabei de testar em uma rede lenta simulada, e o spinner após 2 segundos definitivamente parece bom para mim. Quero reiterar que, no desktop (em um monitor pelo menos razoavelmente grande), a barra de carregamento é praticamente invisível. Acredito que mais 2 a 3 pixels na vertical faria muita diferença.
5 curtidas
Tenho acompanhado essa conversa, pois sou um usuário muito novo do Discourse. Preciso dizer que estou muito impressionado com o nível de reflexão e trabalho duro que está sendo dedicado a essa funcionalidade de UX tão “moderna”. Desculpe-me por me desviar do assunto aqui… mas essa é uma conversa muito impressionante para alguém que usa outros softwares de fórum há anos.
Continuem com o excelente trabalho… adoro essa funcionalidade.
11 curtidas
Talvez eu devesse mencionar que acabei clicando em um tópico logo após já ter clicado nele, porque achei que tinha clicado errado, mesmo que ele já estivesse carregando a partir do primeiro clique. Provavelmente só preciso me acostumar com a falta do spinner…
5 curtidas