Ratgeber: Eine Ladeanzeige muss auch nach einem Fehler wieder enden

Der Vorgang scheitert, der Kreis dreht weiter

Eine Webseite lädt eine Vorschau. Die Anfrage schlägt fehl, eine Fehlermeldung erscheint, aber der Ladekreis bleibt sichtbar und die Schaltfläche gesperrt. Häufig liegt das Aufräumen nur im Erfolgszweig. Promise.finally ist laut MDN für eine Aktion nach dem Abschluss eines Promise vorgesehen, unabhängig davon, ob es erfüllt oder abgelehnt wurde. Die Quelle wurde am 21. Oktober 2026 geprüft. Der folgende Fachratgeber erläutert eine bestehende Technik anhand eines selbst entworfenen Oberflächenfalls.

Drei Dinge auseinanderhalten

Plane zunächst getrennt, was beim Erfolg, beim Fehler und nach jedem abgeschlossenen Versuch passieren soll. Beim Erfolg wird die neue Vorschau gezeigt. Beim Fehler bleibt eine verständliche Erklärung mit einem erneuten Versuch. In beiden Fällen endet die zu diesem Versuch gehörende Beschäftigt-Anzeige. Diese Aufteilung lässt sich bereits in einem Ablaufdiagramm oder einer kurzen Liste überprüfen, bevor Code entsteht.

Ein Aufräumschritt sollte nicht nebenbei behaupten, der Inhalt sei erfolgreich gespeichert worden. „Vorgang beendet“ und „Änderung übernommen“ sind verschiedene Aussagen. Die positive Bestätigung gehört dorthin, wo der Erfolg tatsächlich festgestellt wurde. Gerade bei Formularen verhindert diese Trennung irreführende Meldungen.

Der alte Versuch darf keinen neuen beenden

Nimm nun eine zweite Anfrage hinzu: Während die erste Vorschau noch lädt, startet die Person eine andere Auswahl. Wenn der erste Versuch später endet, darf sein Aufräumen nicht die Ladeanzeige der zweiten Anfrage entfernen. Ordne deshalb Anzeige und Ergebnis einem konkreten laufenden Versuch zu. Welche technische Lösung dein Projekt dafür nutzt, ist eine Implementierungsentscheidung; der Abnahmetest muss den überlappenden Fall jedenfalls enthalten.

Auch das Aufräumen selbst kann einen Fehler verursachen. MDN weist darauf hin, dass ein Fehler im finally-Rückruf den Zustand des zurückgegebenen Promise beeinflusst. Halte diese Funktion deshalb klein und nachvollziehbar. Ein komplexer neuer Datenabruf ist meist keine gute Nebenaufgabe für das bloße Zurücksetzen einer Anzeige.

Mit Verzögerung statt nur im Schnelllauf testen

Bereite drei kontrollierte Fälle vor: Erfolg, verständlicher Fehler und zwei zeitlich überlappende Versuche. Verlangsame die Antwort in einer Entwicklungsumgebung, damit der Zustand beobachtbar bleibt. Prüfe, ob die Eingaben erhalten bleiben, ob ein erneuter Versuch möglich ist und ob nur die passende Antwort erscheint. Ein schneller erfolgreicher Klick deckt diese Probleme selten auf. Das Ergebnis sollte im Testprotokoll mit dem jeweiligen Ablauf festgehalten werden, statt aus einer verschwundenen Ladeanimation auf eine erfolgreiche Speicherung zu schließen.