Carga y rendimiento

Cuatro situaciones que se confunden, cuatro componentes. Hay una accion en marcha y quieres avisar de que algo se esta procesando: DnzLoader. La interfaz todavia no esta lista y quieres mostrar el hueco que va a ocupar: DnzSkeleton. Tienes una subpagina o seccion cara de pintar y quieres aplazar su render hasta que toque: DnzDeferredContent. Y si un bloque puede petar al renderizar, lo aislas para que no se lleve la pagina entera: DnzTryComponent. Elige por el momento, no por el aspecto.

Cual va en cada caso

La confusion habitual es entre "estoy procesando una accion" y "la interfaz aun no esta lista". No son lo mismo:

DnzLoader

Spinner neutro para cuando una seccion entera esta cargando datos y aun no tienes nada que pintar. Es el patron de "cargar en OnInitializedAsync y devolver pronto".

@if (Facturas.IsNull())
{
	<DnzLoader />
}
else
{
	<FacturasGridU Data=@Facturas />
}

@code {
	private List<FacturaDTO> Facturas { get; set; }

	protected override async Task OnInitializedAsync()
	{
		Facturas = await FacturasService.GetPendientesAsync();
	}
}

En barras o cabeceras estrechas, donde un spinner centrado no encaja, pasa Horizontal="true" para la variante compacta de puntos:

<div class="d-flex align-items-center gap-2">
	<span>Sincronizando</span>
	<DnzLoader Horizontal="true" />
</div>

Parametros

DnzSkeleton

Reserva el hueco con rectangulos animados que imitan la forma del contenido que va a llegar. A diferencia del loader, el usuario ve cuantas lineas y que tamano va a ocupar, asi que la espera se siente mas corta.

@if (Movimientos.IsNull())
{
	<DnzSkeleton Lines="5" Height="0.9rem" />
}
else
{
	<MovimientosListaU Data=@Movimientos />
}

Combina varios skeletons de distinto tamano para imitar un encabezado mas filas:

<DnzSkeleton Lines="1" Height="0.7rem" MaxWidth="55%" />
<DnzSkeleton Lines="2" Height="0.9rem" MaxWidth="100%" />

Parametros

DnzDeferredContent

Envuelve un bloque pesado y aplaza su montaje: durante el delay pinta un esqueleto y, pasado ese tiempo, monta el contenido real. Es la pieza clave para que paginas con muchas subvistas aparezcan rapido en lugar de bloquearse pintando todo de golpe.

<DnzDeferredContent DelayMs="300">
	<VentasPorMesGraficoU Data=@Resumen />
</DnzDeferredContent>

Patron de revelado progresivo en un dashboard: los KPIs (lo importante) salen ya, las tarjetas pesadas llegan escalonadas.

<DnzDeferredContent DelayMs="0">
	<KpiSeccionU Data=@Kpis />
</DnzDeferredContent>

<DnzDeferredContent DelayMs="300">
	<RadzenCard>
		<VentasPorMesGraficoU Data=@Ventas />
	</RadzenCard>
</DnzDeferredContent>

<DnzDeferredContent DelayMs="600">
	<RadzenCard>
		<TopClientesTablaU Data=@TopClientes />
	</RadzenCard>
</DnzDeferredContent>

Si no te vale el skeleton por defecto, pasa tu propio indicador de carga en LoadingContent:

<DnzDeferredContent DelayMs="800" Class="p-3">
	<LineasFacturaU Data=@Lineas />
	<LoadingContent>
		<DnzLoader />
	</LoadingContent>
</DnzDeferredContent>

Parametros

DnzTryComponent

Envuelve un bloque que puede petar al renderizar y captura la excepcion para que no se lleve la pagina entera. Es un ErrorBoundary con un fallback opcional a medida.

<DnzTryComponent>
	<GraficoExternoU Data=@Datos />
</DnzTryComponent>

Con fallback propio: el context es la Exception capturada, asi que puedes mostrar el motivo.

<DnzTryComponent>
	<ChildContent>
		<WidgetTercerosU Config=@Config />
	</ChildContent>
	<ErrorContent>
		<RadzenAlert AlertStyle="AlertStyle.Danger" ShowIcon="true">
			No se pudo cargar el widget: @context.Message
		</RadzenAlert>
	</ErrorContent>
</DnzTryComponent>

El componente expone un metodo Recover() por referencia (@ref) para reintentar el render tras un fallo, util si das al usuario un boton de "Reintentar":

<DnzTryComponent @ref="boundary">
	<ChildContent>
		<WidgetTercerosU Config=@Config />
	</ChildContent>
	<ErrorContent>
		<div class="d-flex flex-column align-items-center gap-2 p-3">
			<span>El widget fallo: @context.Message</span>
			<RadzenButton Text="Reintentar" Click=@(() => boundary.Recover()) />
		</div>
	</ErrorContent>
</DnzTryComponent>

@code {
	private DnzTryComponent boundary;
}

Parametros

Relacionado

• Dialogos — DnzSkeleton es el patron tipico mientras el cuerpo de un dialogo carga sus datos
• Tablas e informes — donde mas rinde el diferido y los skeletons al pintar listados pesados
• KPIs y metricas — el caso de uso clasico del revelado progresivo con DnzDeferredContent
• Cookbook de patrones — recetas de extremo a extremo que combinan estos componentes con el SDK
• Indice de componentes · Intro DinaZen
• SDK .NET · Cliente Dinaup — trae los datos que estos componentes cubren mientras cargan
• Informes de Dinaup Flex — la fuente de datos que suele estar detras de un loader o un skeleton