Afegir un indicador que s’està carregant la pàgina #59

Closed
opened 2023-07-04 15:20:48 +00:00 by jfita · 5 comments
Owner

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

Ahir vaig tenir [un problema amb la biblioteca de comprovació d’IVA](tandem/vat/commit/0bbb04196f3377672dff2281db0b86f7ab871a9d) 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
jfita added this to the Posada en marxa inicial milestone 2023-07-04 15:20:48 +00:00
Author
Owner

@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ú?

image

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.)

@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ú? ![image](/attachments/77a288e2-d6f6-4d63-a99d-c302d52ead93) 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.) <video controls src="/attachments/1eb14184-ccca-4e0a-8354-b66439f055ff" type="video/webm"></video>
Owner

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

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
Author
Owner

podem marcar que si tarda més de X ms mostri la capa?

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.

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

L’spinner tindrà el mateix problema que sortirà un moment, simplement a una regió més petita de la pantalla.

> podem marcar que si tarda més de X ms mostri la capa? 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. > 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 L’spinner tindrà el mateix problema que sortirà un moment, simplement a una regió més petita de la pantalla.
Author
Owner

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.

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.
Author
Owner

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 un overflow-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 aplica scrollIntoView 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 posi scrollTop = 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 amb show:top per cridar scrollIntoView, 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 atributs data-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.

> 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 un `overflow-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 aplica `scrollIntoView` 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 posi `scrollTop = 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 amb `show:top` per cridar `scrollIntoView`, 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 atributs `data-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.
jfita closed this issue 2024-09-09 09:17:17 +00:00
Sign in to join this conversation.
No Label
No project
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: tandem/numerus#59
No description provided.