Fortschrittsbalken für Seitenladestatus

Description

Implementiere einen visuellen Fortschrittsbalken, der am oberen Rand der Anwendung angezeigt wird, wenn eine neue Seite geladen wird. Der Fortschrittsbalken bietet ein verbessertes Feedback für den Benutzer, indem er zeigt, dass eine Aktion im Hintergrund ausgeführt wird.

(Wie beispielsweise bei Youtube oder Github)

Discussion

No response

Motivation

Benutzer erwarten visuelles Feedback, besonders wenn Ladezeiten auftreten. Ein Fortschrittsbalken verbessert die wahrgenommene Geschwindigkeit und sorgt für eine positivere User Experience. Dieses Feature ist besonders nützlich für Anwendungen mit langsamen APIs oder großen Seiten.

Details

Um den Fortschrittsbalken zu implementieren, können wir die Bibliothek nprogress verwenden, die speziell für diesen Zweck entwickelt wurde. Diese Bibliothek bietet einfache Funktionen, um den Fortschrittsbalken zu starten, zu aktualisieren und zu beenden. Wir integrieren den Fortschrittsbalken in die Vue-Anwendung, indem wir die Hooks des Vue Routers nutzen: Im beforeEach-Hook wird der Fortschrittsbalken gestartet, und im afterEach-Hook oder im Fall von Fehlern beendet.

Der Fortschrittsbalken sollte am oberen Rand der Seite positioniert sein, mit einer festen Höhe von etwa 4 Pixeln und einer auffälligen Farbe (z. B. Blau oder Grün). Für ein flüssiges Benutzererlebnis können CSS-Übergänge genutzt werden, um den Ladefortschritt sanft darzustellen.

Zusätzlich sollte der Fortschrittsbalken universell funktionieren – also nicht nur bei Seitenwechseln über den Router, sondern auch bei asynchronen API-Aufrufen innerhalb einer Seite. Dafür könnten wir manuell an bestimmten Stellen nprogress-Methoden aufrufen. Die Styling-Anpassungen können in der App.vue oder über ein globales CSS vorgenommen werden. Mit dieser Implementierung wird die Benutzererfahrung verbessert, insbesondere bei Seiten mit längeren Ladezeiten.

remsfal / remsfal-frontend