Les composants Chargeur indiquent que le système traite une commande, par exemple le chargement d'une application, la soumission d'un formulaire, l'exécution d'un calcul ou l'enregistrement des mises à jour. Utilisez les chargeurs lorsque le système exige des utilisateurs qu'ils patientent pendant une durée indéterminée. Cela rassure les utilisateurs sur le fait que le traitement du système est en cours et que ce dernier fonctionne bel et bien.
Les composants Chargeur se présentent sous la forme de deux variantes : chargeur et chargeur intégré.
Les chargeurs sont utilisés pour des processus tels que la récupération de données et les calculs lents. Ils permettent de gérer les attentes des utilisateurs et de fournir des commentaires lors du chargement de pages entières.
Chargeur intégré
Les chargeurs intégrés fournissent un retour visuel indiquant qu'une action est en cours de traitement, par exemple Créer, Mettre à jour et Supprimer.
Chargeur (à gauche) et chargeur intégré (à droite)
Chargeur
A. Indicateur de chargement : apparaît dans une animation en boucle comme le logo Guidewire.
Chargeur intégré
A. Indicateur de chargement : apparaît sous la forme de deux flèches qui tournent dans le sens des aiguilles d'une montre. Lorsque les données sont traitées avec succ ès, l'indicateur de chargement se transforme en coche verte.
B. Étiquette (facultatif) : texte d'assistance expliquant le statut de chargement.
Permet d'afficher la progression du chargement d'une page entière ou d'une opération majeure, par exemple lorsque l'utilisateur attend pendant le chargement d'une application ou l'extraction de données.
Utilisez un chargeur lorsque le temps d'attente prévu est supérieur à trois secondes.
Permet d'indiquer le chargement ou l'extraction de données localisés dans des sections ou des composants spécifiques d'une page.
À utiliser pour des actions telles que les soumissions, les téléchargements et les calculs qui ne peuvent pas être effectués instantanément et qui ne nécessitent qu'un court délai de traitement.
Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
Utilisez des verbes au présent et la forme active dans la plupart des cas.
Les chargeurs intégrés peuvent avoir un texte facultatif qui décrit l'action en cours. Par exemple, « Création d’un compte… ».
L'étiquette doit être modifiée pour refléter le statut de traitement. Par exemple, si un utilisateur crée un compte, l'étiquette peut indiquer « Compte créé » lorsque l'action est terminée.
Les chargeurs intégrés peuvent être utilisés sans texte d'accompagnement dans certaines situations, par exemple lorsqu'ils apparaissent dans un champ de saisie.
Utilisez des étiquettes courtes, significatives et précises pour l'action en attente.
Le chargeur intégré et ses composants utilisent le rôle WAI-ARIA "alert" pour garantir que les utilisateurs de lecteurs d'écran bénéficient des mêmes informations. L'élément avec role="alert" utilise une association aria-labelledby avec <div> où class="jutCubeLoaderscreenReaderOnly" (et la valeur "Loading") pour fournir un nom accessible.
Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :
Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.
La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.
En cas de modification du message de chargement, par exemple, veillez à ce qu'il reste clair et concis.
Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.
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.
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.
Consultez la section Utilisation pour découvrir comment concevoir correctement un chargeur ou un chargeur intégré et connaître les différentes options de configuration que nous proposons.
Vous pouvez utiliser la propriété renderLoader pour définir un chargeur personnalisé au lieu du chargeur par défaut. Cette propriété est une fonction qui renvoie n’importe quel élément React ; il peut s’agir d’une simple représentation du texte affiché dans l’exemple ou d’une animation plus complexe comme celle du chargeur par défaut.
Un chargeur intégré est un composant qui indique si du contenu est en cours de chargement. Un chargeur intégré de base affiche une icône par défaut lorsque le contenu est en cours de chargement, et rien du tout lorsque le contenu ne se charge pas.
<InlineLoader loading={loadingStatus}// true, false, or Promise />
Il existe deux façons de modifier le composant entre ses versions de chargement et de non-chargement :
Si la propriété loading est une propriété booléenne, elle affiche l’icône de chargement par défaut lorsque la valeur de cette propriété est true.
Si la propriété loading correspond à Promise, elle affiche d’abord l’icône de chargement par défaut, mais se met automatiquement à jour lorsque l’opération asynchrone de la promesse est terminée.
Vous pouvez utiliser les propriétés successMessage et loadingMessage pour ajouter du texte personnalisé au composant Chargeur intégré. Lorsqu’un message de réussite s’affiche, ce texte apparaît également à côté d’une icône représentant une coche.
<InlineLoader loading={loadingStatus}// true, false, or Promise loadingMessage="Loading..." successMessage="Success!" />
Vous pouvez utiliser les propriétés loadingIcon et successIcon pour ajouter des icônes personnalisées au message du composant Chargeur intégré. Notez que, comme indiqué précédemment, il doit également y avoir un message de réussite pour tout contenu à afficher à la fin du chargement.
Chargeur (à gauche) et chargeur intégré (à droite)
