Comment afficher un indicateur de chargement lors des appels API dans Blazor ?

Afficher l'indicateur de chargement pendant les appels d'API dans Blazor

Lorsque vous effectuez des appels d'API qui peuvent prendre un certain temps dans Blazor, il est important de fournir des commentaires à l'utilisateur. Les indicateurs couramment utilisés sont un curseur d'attente ou une image tournante. Pour y parvenir dans Blazor, plusieurs options sont disponibles.

Option 1 : Utiliser Task.Delay(1)

Cette méthode implique d'utiliser une tâche asynchrone et d'appeler wait Task .Délai(1); ou attendez Task.Yield(); après chaque mise à jour de l'interface utilisateur. Cela vide les modifications et permet d'afficher le spinner.

Option 2 : Utilisation de Task.Run() (pas pour WebAssembly)

Cette option implique la création d'un long- exécution d'une opération dans une tâche à l'aide de Task.Run(()=> LongOperation());. Cela empêche le blocage du thread principal pendant l'exécution de l'opération.

Effet de Spinner sur le pré-rendu côté serveur

Dans les applications Blazor Server, où les pages sont pré-rendues , la double flèche ne sera visible que si l'opération longue est effectuée dans OnAfterRenderAsync. L'utilisation de cette méthode de cycle de vie au lieu de OnInitializedAsync garantit que le rendu côté serveur n'est pas retardé.

Exemple de code

// Don't do this
//protected override async Task OnInitializedAsync()
//{
//    await LongOperation();
//}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {            
        await Task.Run(()=> LongOperation());//<--or Task.Delay(0) without Task.Run
        StateHasChanged();
    }
}

Supplémentaire Ressources

• [BlazorPro.Spinkit](https://github.com/EdCharbeneau/BlazorPro.Spinkit) fournit une bibliothèque avec des exemples de code pour créer des spinners.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!