Comment afficher un spinner lors des appels API de longue durée dans Blazor ?

Affichage d'une attente ou d'un spinner pendant les appels d'API dans Blazor

Blazor vous permet d'afficher des commentaires à l'utilisateur pendant des appels d'API de longue durée à l'aide d'indices visuels tels que des curseurs d'attente ou des images de spinner.

Problème :

Dans votre application Blazor, vous avez tenté d'utiliser CSS pour afficher un curseur tournant lors des appels API. Cependant, le contenu de la page n'a pas été actualisé jusqu'à la fin de l'appel.

Solution :

Option 1 : Utilisation de Task.Delay(1)

• Créez une méthode asynchrone.
• Utilisez wait Task.Delay(1) ou wait Task.Yield(); pour forcer la mise à jour de l'interface utilisateur avant la fin de l'appel de l'API.

private async Task AsyncLongFunc()    // this is an async task
{
    spinning=true;
    await Task.Delay(1);      // flushing changes. The trick!!
    LongFunc();               // non-async code
    currentCount++;
    spinning=false;
    await Task.Delay(1);      // changes are flushed again    
}

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

• Si votre méthode LongOperation() n'est pas asynchrone, placez-la dans une tâche et attendez-la en utilisant Task.Run().

async Task AsyncLongOperation()    // this is an async task
{
    spinning=true;
    await Task.Run(()=> LongOperation());  //<--here!
    currentCount++;
    spinning=false;
}

Effet

Remarque concernant le prérendu côté serveur :

Dans les applications Blazor Server, le spinner n'apparaîtra pas en raison du prérendu. Pour le rendre visible, effectuez l'opération longue dans OnAfterRender.

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

Pour plus d'exemples et d'informations, reportez-vous aux projets open source comme BlazorPro.Spinkit.

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!