search

educacaoaberta / CiclopeDB

Aggregates data visualization tools for research output
GNU General Public License v3.0
5 stars 2 forks source link

Mostrar um Spinner enquanto o site carrega #65

Closed kalimar closed 6 years ago

kalimar commented 6 years ago

Pensei que o site travou quando eu acessei mas é por demora um pouco. Acho que um spinner seria uma boa. Uma estratégia com jQuery pode ser similar a https://www.codexworld.com/display-loading-image-while-page-loads-jquery-css/

Uns spinners 100% bacanas - https://loading.io/css/ - Só temos que tomar cuidado com navegadores velhos.

Até onde queremos oferecer apoio? IE 11?

kalimar commented 6 years ago

https://www.mapbox.com/assembly/examples/spinner/

greevin commented 6 years ago

O site trava por causa da timeline que tem na aba 'Principal'. Pelo que eu verifiquei, essa timeline tem 125 slides e, segundo o site da ferramenta, eles recomendam 20 slides ("Keep it short. We recommend not having more than 20 slides for a reader to click through.").

sem titulo

Eu coloquei o spinner que tá no Assembly na página e ficou bem legal, assim o usuário sabe que alguma coisa está acontecendo e não tem a impressão que você teve. Além de colocar o $(window).on('load'), coloquei um setTimeout de 5 segundos para que a página termine de carregar completamente.

tamielbr commented 6 years ago

@greevin eu sabia do problema do excesso de dados, mas nunca tinha dado problema. acho que a recomendação, pelo que li, é mais de design do que de carga (só usamos texto na maioria delas).

que tal pensarmos em criar uma nova aba nessa mesma página principal e colocar lá? assim ela não dá um load logo de cara?

greevin commented 6 years ago

Achei um exemplo da timeline (http://www.cygnus-x1.net/links/rush/timeline.php) que, mesmo povoada de imagem e texto, parece ser um pouco mais rápida.Vou dar uma pesquisada melhor, @tamielbr! 😉

greevin commented 6 years ago

Acabei de ver que a questão toda é do iframe e não da Timeline. :)

http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/

tamielbr commented 6 years ago

@greevin podemos pensar em outra solução para a timeline... acho que se integrar bem à interface, podemos ir pra outro caminho qualquer...

greevin commented 6 years ago

Com a adição do spinner, a timeline da página inicial é carregada e, quando o spinner some, tudo já está pronto pra ser utilizado evitando que a timeline 'segure' a página até terminar de carregar.