Alcançar a mesma transição de página em fade do NodeBB?

Dev
1

Olá.
Uma coisa que eu prefiro no NodeBB em relação ao Discourse é o efeito de transição de página.
A principal diferença é que, no Discourse, o HTML do conteúdo é removido assim que você clica em um link, enquanto, no NodeBB, o conteúdo é mantido até que o novo conteúdo esteja pronto para ser exibido, permitindo um efeito suave de desaparecimento no conteúdo enquanto a próxima página está carregando.

Seria possível fazer essa modificação? Ela exigiria muita programação?

2

Adoro a ideia! :bulb: :heart: (mas, para ser honesto, pode ficar irritante bem rápido? :wink: )

Sim, é possível fazer.

Uma maneira é sobrescrever o componente Topic List mais ou menos assim:

api.modifyClass('component:topic-list',  {
        @on('init')
        setup() {
           $("#list-area").fadeOut(0);
        },  
        @on('didRender')
        completeRender(){
          $("#list-area").fadeIn(600);
        }
    }
)

Acabei de testar isso no TLP e funciona, mas as alterações estão misturadas com sobrescrições existentes desse componente, então peço desculpas se houver algum erro de digitação acima; apenas removi todo o resto do código desnecessário do TLP.

Estou tentado a adicionar isso como uma opção opcional no TLP :smiley:

NB: isso não dará suporte à página de Categoria no momento; será necessário desenvolver a ideia ainda mais.

3

Vou tentar isso, obrigado!

4

Olá, testei o recurso no seu plugin, mas não é exatamente a mesma coisa: quando eu exibo a lista de tópicos, é o conteúdo solicitado que aparece gradualmente após ser carregado; no NodeBB, é o conteúdo atual que desaparece gradualmente enquanto o próximo conteúdo está sendo carregado.

O principal é que devemos encontrar uma maneira de impedir que o Discourse remova o HTML atual imediatamente após clicar em um link. O HTML deve permanecer no lugar até que o novo conteúdo seja carregado (ou até que o efeito de desaparecimento termine, mas não tenho certeza se isso é melhor :upside_down_face:) e esteja pronto para ser exibido.

5

Hmm, ok. O que eu forneci corresponde então a 50% do que você está descrevendo agora (da animação, se não do esforço de programação!). Você está essencialmente pedindo para atrasar a remoção e substituir o spinner por um fade out. No entanto, não estou convencido de que sua suposição sobre o que está acontecendo no outro sistema esteja correta. Com certeza não há como prever quanto tempo levará para carregar os dados com uma chamada assíncrona, então o fade out não ficará perfeitamente sincronizado, mesmo que seja isso que pareça estar acontecendo. Talvez haja um pequeno atraso quando as coisas estão em branco. Sinta-se à vontade para dar continuidade, resolver o restante e compartilhar, embora isso não seja uma tarefa trivial já que o spinner do Discourse aparece na nova rota, não no final da anterior. atualização: não, não aparece. Ele está em seu próprio div, que é tornado visível conforme necessário. Algumas observações adicionais: o contêiner da lista é ocultado pouco após a ação de clique, o que parece desmontar imediatamente a área da lista (possivelmente uma otimização implícita do Ember, embora eu não tenha certeza). Seria necessário alterar esse comportamento desde o início.

6

Claro que não lê o futuro :rocket:. O fade out no NodeBB parece ser de cerca de 200ms. Se a página demorar mais para carregar, você verá uma tela em branco.

E sim, você tem razão, a ideia é basicamente substituir o spinner por um fade out com duração fixa. :slight_smile:
Se o tempo de carregamento for mais rápido que o fade out, então o efeito deve ser interrompido para permitir que o novo conteúdo seja exibido.

Programação não é minha habilidade principal e não sei como o Discourse funciona, então não tenho certeza se vou conseguir entender, mas vale a pena dar uma olhada.

Obrigado pelos seus conselhos e sugestões!