Blazor est génial, vraiment génial, surtout lorsque nous faisons des choses asynchrones comme charger des boîtes et ça a l’air bien.

J’ai essayé de plusieurs manières de gérer le chargement des pages, des états, des composants, etc. Et je pense avoir enfin trouvé le moyen idéal de le faire comme je le souhaite.

Idée

Au lieu de réécrire la logique de chargement sur chaque page ou composant, nous construisons le composant parent avec un ChildComponent, cela nous donnera la possibilité de simplement le réutiliser plusieurs fois.

Code du composant de chargement

Le code est assez simple cependant, il n’y a pas grand chose à faire, un if basique avec une propriété de chargement, une fonction bascule à l’intérieur et c’est fait !

@if (_loaded)
{
    <div class="text-center">
        <div class="spinner-border" role="status">
            <span class="sr-only"></span>
        </div>
    </div>
}
else
{
    @ChildContent
}

@code {
    private bool _loaded = true;

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    public void ToggleLoad(bool state)
    {
        _loaded = state;
    }
}

Utilisation

L’utilisation est assez simple, pour des raisons de test, nous allons utiliser une nouvelle page et nous plaçons notre contenu dans le composant LoadingComponent créé que nous venons de créer.

@page "/loading"
@using LoadingBoxes.Components

<LoadingBoxes.Components.LoadingComponent @ref=loadingComponent>
    This is some content
</LoadingBoxes.Components.LoadingComponent>

@code {
    private LoadingComponent loadingComponent;


    protected override async Task OnInitializedAsync()
    {
        // We are going to simulate some load
        await Task.Delay(5000);

        loadingComponent.ToggleLoad(false);
    }

}

Voilà à quoi ça ressemble

Un exemple plus amusant

Disons que nous avons plusieurs composants dont chacun a son temps de chargement, nous pouvons construire quelque chose qui a l’air bien dessus !

Créons un faux composant de chargement que nous pouvons réutiliser appelé FakeLoadingComponent.

@using LoadingBoxes.Components

<LoadingBoxes.Components.LoadingComponent @ref=loadingComponent>
    It took @ellapsedTime seconds!
</LoadingBoxes.Components.LoadingComponent>

@code {
    private LoadingComponent loadingComponent = new();
    private int ellapsedTime = 0;
    private Random rnd = new(); 

    protected override async Task OnInitializedAsync()
    {
        var random = rnd.Next(0, 5000);

        // We are going to simulate some load
        await Task.Delay(random);

        ellapsedTime = random/ 1000;

        loadingComponent.ToggleLoad(false);
        StateHasChanged();
    }
}

Ensuite, nous mettons simplement à jour la page Loading avec plusieurs composants FakeLoadingComponent et vérifions le résultat !!

@page "/loading"
@using LoadingBoxes.Components

<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>

Maintenant, ça a l’air bien mieux

Et c’est tout !

Si vous avez des problèmes ou des questions, n’hésitez pas à me contacter sur n’importe quel réseau social à @emimontesdeoca (sur Twitter, c’est en fait @emimontesdeocaa avec deux aa à la fin). Vous pouvez également retrouver la plupart de mes réseaux sociaux sur l’en-tête du blog.

J’espère que vous avez aimé le message !