This content originally appeared on DEV Community and was authored by Romain Geffrault
đ Un loader UX-friendly en Angular avec RxJS
Afficher un loader trop rapidement peut provoquer un effet de "flash" désagréable. à l'inverse, le masquer trop tÎt peut perturber l'utilisateur. Voici une solution simple et réutilisable avec RxJS pour un loader intelligent et fluide.
Lien stackblitz.
đŻ Objectif
- Ne pas afficher le loader avant 200âŻms, pour Ă©viter les flashs inutiles.
- Une fois quâil est affichĂ©, le maintenir visible au moins 2âŻsecondes, pour assurer une expĂ©rience utilisateur stable.
- Masquer le loader uniquement quand lâAPI a terminĂ© de charger et que les 2 secondes sont Ă©coulĂ©es.
đ§ Le code
// Timer déclenché aprÚs 200ms
const _passed200ms = timer(200).pipe(
map(() => true),
startWith(false)
);
// Timer déclenché aprÚs 2 secondes
const _passed2sDisplay = timer(2000).pipe(
map(() => true),
startWith(false)
);
// Fonction principale : retourne un Observable<boolean> Ă consommer dans le template
function uiLoading$(isLoading$: Observable<boolean>) {
return combineLatest([_passed200ms, _passed2sDisplay, isLoading$]).pipe(
tap((data) => console.log('data', data)),
map(([passed200ms, passed2sDisplay, isApiStillLoading]) => {
if (!passed200ms) return false; // Ne rien afficher avant 200ms
if (isApiStillLoading) return true; // Affiche le loader si l'API charge encore
return !passed2sDisplay ? true : false; // Attendre les 2s sinon
}),
distinctUntilChanged()
);
}
đ§Ș Cas dâusage
đč Cas 1 : API lente â loader visible de 200ms Ă 5s
uiLoading$(
of('data').pipe(
delay(5000),
map(() => false),
startWith(true)
)
).subscribe(result => console.log('result', result));
đč Cas 2 : API trĂšs rapide â le loader ne s'affiche jamais
uiLoading$(
of('data').pipe(
delay(50),
map(() => false),
startWith(true)
)
).subscribe(result => console.log('result', result));
đč Cas 3 : API rapide mais pas instantanĂ©e â loader visible entre 200ms et 2s
uiLoading$(
of('data').pipe(
delay(1500),
map(() => false),
startWith(true)
)
).subscribe(result => console.log('result', result));
â Avantages
- 100 % rĂ©actif, sans variable dâĂ©tat local ou setTimeout.
- Composable : peut ĂȘtre utilisĂ© dans nâimporte quel composant Angular.
- UX fluide : améliore la perception du chargement cÎté utilisateur.
Conseil perso: Fait en sorte de souscrire à cet observable directement dans ton template, cela va permettre au loader de s'adapter en conséquence.
Je m'excuse, je partage rapidement cet utilitaire, sans implémentation concrÚte. Toutefois, si tu as des questions ou si tu souhaites un example d'implémentation n'hésite pas.
Si l'article t'a plu ou si tu as des questions, n'hésite pas à laisser un commentaire ou encore à me suivre sur linkedin Romain Geffrault.
This content originally appeared on DEV Community and was authored by Romain Geffrault
Romain Geffrault | Sciencx (2025-06-25T08:59:43+00:00) Un loader UX-friendly en Angular avec cet utilitaire RxJS. Retrieved from https://www.scien.cx/2025/06/25/un-loader-ux-friendly-en-angular-avec-cet-utilitaire-rxjs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.