Lidar com o carregamento de componentes no Blazor
O Blazor é incrível, realmente incrível, especialmente quando fazemos coisas assíncronas, como carregar caixas, e fica bom.
Tenho tentado fazer várias maneiras de lidar com o carregamento de páginas, estados, componentes, etc. E acho que finalmente encontrei a maneira perfeita de fazer isso da maneira que desejo.
Idéia
Em vez de reescrever a lógica de carregamento em cada página ou componente, construímos o componente pai com um ChildComponent, isso nos dará a mudança para apenas reutilizar várias vezes.
Carregando código do Componente
O código é bem simples, não há muito o que fazer, um if básico com uma propriedade de carregamento, uma função de alternância interna e pronto!
@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;
}
}
Uso
O uso é bem simples, para fins de teste vamos usar uma nova página e colocar nosso conteúdo dentro do componente LoadingComponent criado que acabamos de criar.
@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);
}
}
É assim que parece
Exemplo mais engraçado
Digamos que temos vários componentes e cada um deles tem seus tempos de carregamento, podemos construir algo que fique bem com isso!
Vamos criar um componente de carregamento falso que podemos reutilizar chamado 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();
}
}
Depois é só atualizar a página Loading com vários componentes FakeLoadingComponent e verificar o resultado!!
@page "/loading"
@using LoadingBoxes.Components
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
Agora isso parece muito melhor
E é isso!
Se você tiver qualquer problema ou dúvida, sinta-se à vontade para entrar em contato comigo em qualquer mídia social em @emimontesdeoca (no Twitter na verdade é @emimontesdeocaa com dois aa no final). Você também pode encontrar a maioria das minhas redes sociais no cabeçalho do blog.
Espero que você tenha gostado da postagem!