LgLoaderView

LgLoaderView affiche un état de chargement puis remplace automatiquement le loader par le contenu final. Il couvre les chargements indéterminés, les progressions déterminées avec Lagoon.Helpers.Progress, les erreurs, l'annulation et le redémarrage.

<LgLoaderView IsLoading="@IsLoading" Label="#LoadingOrders">
    @("#OrdersLoaded".Translate())
</LgLoaderView>

• Espace de noms : Lagoon.UI.Components
• Hérite de : LgComponentBase
• Package NuGet : Lagoon.UI

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Chargement indéterminé

Utilisez IsLoading pour afficher le loader tant que le traitement n'est pas terminé. ChildContent est rendu uniquement après le chargement.

Choisir l'animation

Sans progression, LgLoaderView affiche le spinner de l'application, le même que sur l'écran de démarrage. Il se choisit dans le main.scss du client : voir Spinner de chargement.

OrdersLoaderPage.razor

<LgLoaderView IsLoading="@IsLoading" Label="#LoadingOrders">
    @("#OrdersLoaded".Translate())
</LgLoaderView>

<LgButton Text="#ReloadOrders" OnClick="ReloadOrdersAsync" />

OrdersLoaderPage.razor.cs

public partial class OrdersLoaderPage : LgPage
{
    // Indique si les données sont en cours de chargement.
    private bool IsLoading { get; set; } = true;

    // Lance un rechargement et laisse LgLoaderView afficher l'état d'attente.
    private async Task ReloadOrdersAsync(ActionEventArgs args)
    {
        IsLoading = true;
        await Task.Delay(1000, args.CancellationToken);
        IsLoading = false;
    }
}

Chargement déterminé avec Progress

Passez une instance de Lagoon.Helpers.Progress pour que le loader suive automatiquement Position, StartPosition, EndPosition et Message.

ImportLoaderPage.razor

<LgLoaderView Progress="@ImportProgress" ProgressType="ProgressType.Circle">
    @("#ImportCompleted".Translate())
</LgLoaderView>

<LgButton Text="#StartImport" OnClick="StartImportAsync" />

ImportLoaderPage.razor.cs

public partial class ImportLoaderPage : LgPage
{
    // Progression partagée avec LgLoaderView ; elle déclenche le rafraîchissement du composant.
    private Progress ImportProgress { get; } = new(100, "#ImportStarting");

    // Simule un import et publie chaque étape dans l'objet Progress.
    private async Task StartImportAsync(ActionEventArgs args)
    {
        ImportProgress.Reset(100, "#ImportStarting");
        for (int i = 0; i <= 100; i++)
        {
            ImportProgress.Report(i, "#ImportRunning");
            await Task.Delay(25, args.CancellationToken);
        }
    }
}

Barre ou cercle de progression

ProgressType choisit le rendu déterminé : cercle par défaut ou barre horizontale. En mode barre, LgLoaderView rend un LgProgress.

ArchiveLoaderPage.razor

<LgLoaderView Progress="@ArchiveProgress" ProgressType="ProgressType.Bar">
    @("#ArchiveCompleted".Translate())
</LgLoaderView>

ArchiveLoaderPage.razor.cs

public partial class ArchiveLoaderPage : LgPage
{
    // Progression utilisée pour afficher une barre horizontale dans le loader.
    private Progress ArchiveProgress { get; } = new(50, "#ArchiveStarting");
}

Rendu personnalisé du loader

CustomTemplate reçoit l'instance Progress et remplace le rendu par défaut pendant le chargement.

CustomLoaderPage.razor

<LgLoaderView IsLoading="@IsLoading">
    <CustomTemplate Context="progress">
        <LgIcon IconName="@IconNames.Loading" CssClass="custom-loader-icon" />
        <LgLabel Text="@(progress?.Message)" />
    </CustomTemplate>
    <ChildContent>
        @("#CustomLoadingCompleted".Translate())
    </ChildContent>
</LgLoaderView>

CustomLoaderPage.razor.cs

public partial class CustomLoaderPage : LgPage
{
    // Pilote l'affichage du rendu personnalisé pendant l'attente.
    private bool IsLoading { get; set; } = true;
}

Erreur, annulation et redémarrage

IsError affiche un message d'erreur. OnActionCancellation ajoute un bouton d'annulation ; OnActionRestart ajoute un bouton de redémarrage après annulation ou erreur.

CancelableLoaderPage.razor

<LgLoaderView IsLoading="@IsLoading"
              IsError="@IsError"
              ErrorTitle="#LoadingErrorTitle"
              ErrorDescription="#LoadingErrorDescription"
              CancelDescription="#LoadingCancelled"
              OnActionCancellation="CancelLoadingAsync"
              OnActionRestart="RestartLoadingAsync">
    @("#LoadingCompleted".Translate())
</LgLoaderView>

CancelableLoaderPage.razor.cs

public partial class CancelableLoaderPage : LgPage
{
    // Indique si le traitement est encore en cours.
    private bool IsLoading { get; set; } = true;

    // Indique si le loader doit afficher l'état d'erreur.
    private bool IsError { get; set; }

    // Annule le traitement côté page et laisse LgLoaderView afficher l'état annulé.
    private Task CancelLoadingAsync()
    {
        IsLoading = false;
        return Task.CompletedTask;
    }

    // Réinitialise l'état de la page avant de relancer le traitement.
    private Task RestartLoadingAsync()
    {
        IsError = false;
        IsLoading = true;
        return Task.CompletedTask;
    }
}

Textes RGAA annoncés aux lecteurs d'écran

RgaaTextLoading et RgaaTextLoaded sont transmis à l'annonce lecteur d'écran lorsque l'état de chargement change. Les valeurs par défaut sont déjà des clés de traduction.

AccessibleLoaderPage.razor

<LgLoaderView IsLoading="@IsLoading"
              RgaaTextLoading="#OrdersLoadingRgaa"
              RgaaTextLoaded="#OrdersLoadedRgaa">
    @("#OrdersReady".Translate())
</LgLoaderView>

AccessibleLoaderPage.razor.cs

public partial class AccessibleLoaderPage : LgPage
{
    // État de chargement annoncé aux technologies d'assistance par LgLoaderView.
    private bool IsLoading { get; set; }
}

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
CancelDescription	string	null	LgLoaderView	Description affichée lorsque l'utilisateur annule l'action.
ChildContent	RenderFragment	null	LgLoaderView	Contenu rendu lorsque le chargement est terminé.
CssClass	string	null	LgLoaderView	Classes CSS additionnelles appliquées au conteneur du loader.
CustomTemplate	RenderFragment<Progress>	null	LgLoaderView	Rendu personnalisé affiché pendant le chargement.
ErrorContent	RenderFragment	null	LgLoaderView	Contenu prévu pour l'état d'erreur.
ErrorDescription	string	null	LgLoaderView	Description affichée en état d'erreur.
ErrorTitle	string	null	LgLoaderView	Titre affiché en état d'erreur.
IsError	bool	false	LgLoaderView	Indique si le loader doit afficher l'état d'erreur.
IsLoading	bool	false	LgLoaderView	Indique si le chargement est en cours.
Label	string	null	LgLoaderView	Label affiché sous l'indicateur de chargement.
OnActionCancellation	EventCallback	—	LgLoaderView	Callback d'annulation ; sa présence affiche un bouton d'annulation.
OnActionRestart	EventCallback	—	LgLoaderView	Callback de redémarrage ; sa présence affiche un bouton de redémarrage.
Progress	Progress	null	LgLoaderView	Instance de progression suivie par le loader.
ProgressType	ProgressType	ProgressType.Circle	LgLoaderView	Type de rendu utilisé pour une progression déterminée.
RgaaTextLoaded	string	#RgaaPageLoaded	LgLoaderView	Texte annoncé lorsque le chargement se termine.
RgaaTextLoading	string	#RgaaPageLoading	LgLoaderView	Texte annoncé lorsque le chargement commence.

remarque

Objet Progress

Lagoon.Helpers.Progress expose notamment Message, Position, StartPosition, EndPosition, IsEnded, IsIndeterminate et les événements OnProgress, OnEnd, OnReset. LgLoaderView s'abonne à ces événements pour rafraîchir son rendu.

Événements

Nom	Type	Description
OnActionCancellation	EventCallback	Déclenché par le bouton d'annulation affiché pendant le chargement.
OnActionRestart	EventCallback	Déclenché par le bouton de redémarrage affiché après une annulation ou une erreur.

Énumérations associées

ProgressType

Type de rendu de la progression déterminée. La valeur par défaut est Circle.

Valeur	Description
Bar	Affiche une barre de progression LgProgress.
Circle	Affiche une progression circulaire LgCircleProgress (valeur par défaut).

Accessibilité

• LgLoaderView annonce les changements d'état via RgaaTextLoading et RgaaTextLoaded.
• En mode ProgressType.Bar, la progression rendue par LgProgress expose role="progressbar", aria-valuenow, aria-valuemin et aria-valuemax.
• Conservez un Label traduit pour expliquer l'opération en cours, surtout en chargement indéterminé.
• Le contenu final reste dans ChildContent, ce qui évite de présenter des données incomplètes pendant le chargement.

Composants liés

• LgProgress — barre utilisée par LgLoaderView en mode ProgressType.Bar.
• LgCircleProgress — progression circulaire utilisée par défaut en progression déterminée.
• LgBanner — feedback persistant après ou pendant un traitement.