Loader-Komponenten weisen darauf hin, dass ein Befehl im System verarbeitet wird, z. B. das Laden einer Anwendung, das Übermitteln eines Formulars, das Ausführen einer Berechnung oder das Speichern von Aktualisierungen. Verwenden Sie Loader, wenn das System die Benutzer für eine unbestimmte Zeit warten lässt. Dadurch wird den Benutzern versichert, dass die Systemverarbeitung im Gange ist und das System funktioniert.
Loader-Komponenten sind in zwei Varianten verfügbar: Loader und Inline-Loader.
Loader werden für Prozesse wie Datenabrufe und langsame Berechnungen genutzt. Sie sorgen dafür, dass Benutzererwartungen erfüllt werden, und geben Feedback beim Laden ganzer Seiten.
Inline-Loader
Inline-Loader zeigen visuell an, dass eine Aktion verarbeitet wird, z. B. Erstellen, Aktualisieren und Löschen.
Loader
A. Ladeanzeige: Wird in einer Schleifenanimation als Guidewire-Logo angezeigt.
Inline loader
A. Ladeanzeige: Wird in Form von zwei Pfeilen angezeigt, die sich im Uhrzeigersinn drehen. Wenn die Daten erfolgreich verarbeitet wurden, ändert sich die Ladeanzeige in ein grünes Häkchen.
B. Beschriftung (optional): Hilfstext, der den Ladestatus erklärt.
Zu verwenden für die Anzeige des Ladefortschritts einer ganzen Seite oder eines umfangreichen Vorgangs, z. B. wenn darauf gewartet wird, dass eine Anwendung geladen oder Daten abgerufen werden.
Zu verwenden, wenn die Wartezeit voraussichtlich länger als drei Sekunden sein wird.
Zu verwenden, um das lokale Laden oder Abrufen von Daten in bestimmten Abschnitten oder Komponenten einer Seite anzuzeigen.
Zu verwenden für Aktionen wie Übertragungen, Uploads und Berechnungen, die nicht sofort ausgeführt werden können und nur eine kurze Bearbeitungszeit in Anspruch nehmen.
Inline-Loader können einen optionalen Text enthalten, der die durchgeführte Aktion beschreibt. Zum Beispiel „Konto wird erstellt ...“.
Die Beschriftung sollte sich ändern, um den Bearbeitungsstatus anzugeben. Wenn ein Benutzer beispielsweise ein Konto erstellt, kann die Beschriftung „Konto erstellt“ lauten, wenn die Aktion abgeschlossen ist.
Inline-Loader können in bestimmten Fällen ohne begleitenden Text verwendet werden, z. B. wenn sie in einem Eingabefeld angezeigt werden.
Verwenden Sie kurze, aussagekräftige und der jeweiligen Aktion entsprechende Beschriftungen.
Sowohl die Inline-Loader- als auch die Loader-Komponente verwenden die WAI-ARIA-Rolle „alert“, um sicherzustellen, dass Benutzer von Screenreadern dieselben Informationen erhalten. Das Element mit „role="alert"“ verwendet eine aria-labelledby-Zuordnung mit dem <div> class="jutCubeLoaderscreenReaderOnly" (und dem Wert „Loading“), um einen barrierefreien Namen bereitzustellen.
Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.
Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.
Wenn die Lademeldung z. B. geändert wird, muss sie klar und prägnant sein.
Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.
Controls whether the Loader UI is shown or the children components. For Boolean values, if set to false, the Loader UI is displayed; if set to true the children are displayed. For Promise values, the Loader UI is displayed until the promise has completed, then the children are displayed.
A function to render a component to display when loading. By default, it will display the built in BrandedLoader component that displays an animation using the guidewire logo.
Controls whether the Inline Loader shows its loading or completed versions. For Boolean values, if set to false, the loading version is displayed; if set to true, the success version is displayed. For Promise values, the loading version is displayed until the promise has completed, then the completed version is displayed. For Promise arrays, they behave like Promise values except it will be considered loading until every promise in the array has been fulfilled.
An Icon component or icon name. For example, SearchIcon or 'gw-search', to be shown when content has completed loading. Note that this icon will not show unless there is also a successMessage value.
Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design eines Loader oder Inline-Loader und zu den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.
Sie können die Eigenschaft renderLoader verwenden, um einen benutzerdefinierten Loader anstelle des Standard-Loaders zu definieren. Diese Eigenschaft ist eine Funktion, die jedes beliebige React-Element zurückgibt. Dabei kann es sich um einen einfachen Text wie den im Beispiel gezeigten Text oder um eine komplexere Animation wie die Anzeige des Standard-Loaders handeln.
Ein Inline-Loader ist eine Komponente, die angibt, ob Inhalte aktuell geladen werden. Ein einfacher Inline-Loader zeigt ein Standardsymbol an, wenn Inhalte geladen werden. Wenn keine Inhalte geladen werden, wird nichts angezeigt.
<InlineLoader loading={loadingStatus}// true, false, or Promise />
Es gibt zwei Möglichkeiten, die Komponente zwischen der geladenen und der nicht geladenen Version zu ändern:
Wenn es sich bei der Eigenschaft loading um den Boolean-Typ handelt, wird das Standard-Ladesymbol angezeigt, wenn der Wert dieser Eigenschaft true ist.
Wenn die Eigenschaft loading vom Typ Promise ist, wird anfänglich das Standard-Ladesymbol angezeigt, das jedoch automatisch aktualisiert wird, wenn der asynchrone Vorgang der Zusage abgeschlossen wird.
Mit den Eigenschaften successMessage und loadingMessage können Sie benutzerdefinierten Text in der Inline-Loader-Komponente hinzufügen. Wenn eine Erfolgsmeldung angezeigt wird, wird der entsprechende Text auch neben einem Häkchensymbol angezeigt.
<InlineLoader loading={loadingStatus}// true, false, or Promise loadingMessage="Loading..." successMessage="Success!" />
Mit den Eigenschaften loadingIcon und successIcon können Sie benutzerdefinierte Symbole in der Inline-Loader-Komponente hinzufügen. Beachten Sie, dass, wie bereits erwähnt, auch eine Erfolgsmeldung für Inhalte angezeigt werden muss, wenn der entsprechende Ladevorgang abgeschlossen ist.
Loader (links) und Inline-Loader (rechts)
