Afegir un indicador que s’està carregant la pàgina #59
Labels
No Label
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: tandem/numerus#59
Loading…
Reference in New Issue
No description provided.
Delete Branch "%!s(<nil>)"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Ahir vaig tenir un problema amb la biblioteca de comprovació d’IVA que feia anar tan let la base de dades que trigava fins a 5 segons a respondre.
Aquell problema ja està arreglat, però vaig veure que en casos que triga un pel més del compte pot semblar que l’aplicació no està carregant res, però si l’usuari té JavaScript activat es fa la càrrega del contingut amb AJAX i l’explorador no ensenya cap indicació que s’està carregant.
No estic segur què posar exactament que quedi bé, per
@oriol Et sembla bé si faig que durant la càrrega es mostri una capa negra semitransparent, similar al fons que es mostra quan hi ha obert algún menú?
El problema d’això és que si la càrrega és ràpida veus el negre un moment, cada vegada que fas una acció. (Veure el fitxer
flicker.webm
amb exemple.)podem marcar que si tarda més de X ms mostri la capa?
si no potser haurem de posar un spinner, que hi estem més acostumats i entenem que alguna cosa es carrega...
lo fotut, és aquestes pàgines que no tarda res i fa aquest flaix que no és gaire agradable
Ho havia pensat, però triï el valor que triï, pot haver-hi el flaix per la gent que la càrrega li triga un miŀlisegon més del temps que he escollit.
L’spinner tindrà el mateix problema que sortirà un moment, simplement a una regió més petita de la pantalla.
Um. Potser lo seu seria deixar-li fer a l’explorador la seva feina i fer servir el JavaScript només per aquelles parts que realment han de ser dinàmiques, com afegir una nova línia a factura / presspost o cercar el producte.
Al final he tret la càrrega AJAX de pàgines: a
16e80b5ae0
vaig fer que<header>
es quedi fixa i que<main>
tingui unoverflow-y: scroll
per tenir ell la barra de desplaçament, però això va fer que htmx no pugui «pujar» la pàgina quan carrega el nou contingut via AJAX, ja que aplicascrollIntoView
a<main>
i ara sempre està a «into view», ja que el<body>
ja no té desplaçament.htmx té una directiva
scroll:top
per demanar-li que posiscrollTop = 0
quan ha substituït el contingut, que faria el correcte en aquest cas i «reiniciaria» el<main>
a dalt de tot. Tanmateix, jo no he sabut trobar la manera que ho faci automàticament, igual que fa ambshow:top
per cridarscrollIntoView
, el que significa ho hauria de posar a tots els enllaços que carregen via AJAX.Entre això i que a sobre no hi ha cap indicador que s’està carregant la pàgina, a
82da7f4697
he esborrat tots els atributsdata-hx-boost
dels enllaços i que l’explorador carregui tota la pàgina. Va «prou ràpid» i l’explorador indica clarament que està carregant el web.