Blazor ist großartig, wirklich großartig, besonders wenn wir asynchrone Dinge wie das Laden von Boxen erledigen, und es sieht einfach gut aus.

Ich habe versucht, auf verschiedene Weise mit dem Laden von Seiten, Zuständen, Komponenten usw. umzugehen. Und ich glaube, ich habe endlich den perfekten Weg gefunden, es so zu machen, wie ich es möchte.

Idee

Anstatt die Logik zum Laden auf jeder Seite oder Komponente neu zu schreiben, erstellen wir eine übergeordnete Komponente mit einem ChildComponent, wodurch wir die Möglichkeit haben, sie einfach mehrmals wiederzuverwenden.

LoadingComponent-Code

Der Code ist jedoch ziemlich einfach, es gibt nicht viel zu tun, ein einfaches if mit einer Ladeeigenschaft, einer Umschaltfunktion darin und fertig!

@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;
    }
}

Nutzung

Die Verwendung ist ziemlich einfach. Zum Testen verwenden wir eine neue Seite und fügen unseren Inhalt in die erstellte LoadingComponent-Komponente ein, die wir gerade erstellt haben.

@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);
    }

}

So sieht es aus

Noch mehr lustiges Beispiel

Nehmen wir an, wir haben mehrere Komponenten, von denen jede ihre Ladezeiten hat. Darauf können wir etwas aufbauen, das gut aussieht!

Erstellen wir eine gefälschte Ladekomponente namens FakeLoadingComponent, die wir wiederverwenden können.

@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();
    }
}

Dann aktualisieren wir einfach die Seite Loading mit mehreren FakeLoadingComponent-Komponenten und überprüfen das Ergebnis!!

@page "/loading"
@using LoadingBoxes.Components

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

Das sieht jetzt viel besser aus

Und das ist es!

Wenn Sie Probleme oder Fragen haben, können Sie mich gerne über die sozialen Medien unter @emimontesdeoca kontaktieren (auf Twitter ist es eigentlich @emimontesdeocaa mit zwei aa am Ende). Die meisten meiner sozialen Netzwerke finden Sie auch in der Kopfzeile des Blogs.

Ich hoffe, Ihnen hat der Beitrag gefallen!