Manejar la carga de componentes en Blazor
Blazor es asombroso, realmente asombroso, especialmente cuando hacemos cosas asincrónicas como cargar cuadros y simplemente se ve bien.
He estado intentando hacer varias formas de manejar la carga de páginas, estados, componentes, etc. Y creo que finalmente encontré la manera perfecta de hacerlo de la manera que quiero.
#idea
En lugar de reescribir la lógica para cargar en cada página o componente, creamos el componente principal con un ChildComponent, esto nos dará el cambio para simplemente reutilizarlo varias veces.
Cargando código de componente
Aunque el código es bastante simple, no hay mucho que hacer, un if básico con una propiedad de carga, una función de alternancia interna y ¡listo!
@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
El uso es bastante simple, para realizar pruebas usaremos una nueva página y colocaremos nuestro contenido dentro del componente LoadingComponent creado que acabamos de crear.
@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);
}
}
así es como se ve
Ejemplo más divertido
Digamos que tenemos múltiples componentes y cada uno de ellos tiene sus tiempos de carga, ¡podemos construir algo que se vea bien con eso!
Creemos un componente de carga falso que podamos reutilizar llamado 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();
}
}
Luego simplemente actualizamos la página Loading con múltiples componentes FakeLoadingComponent y verificamos el resultado.
@page "/loading"
@using LoadingBoxes.Components
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
<FakeLoadingComponent/>
Ahora esto se ve mucho mejor
¡Y eso es todo!
Si tienes algún problema o pregunta, no dudes en contactarme en cualquier red social en @emimontesdeoca (en Twitter en realidad es @emimontesdeocaa con dos aa al final). También puedes encontrar la mayoría de mis redes sociales en el encabezado del blog.
Espero que os haya gustado el post!