Carga y rendimiento

Cinco situaciones distintas, cinco componentes. Una acción en marcha que se está procesando: DnzLoader. Una interfaz sin datos todavía, con el hueco reservado: DnzSkeleton. Una sección costosa de renderizar que conviene aplazar: DnzDeferredContent. Un bloque que puede fallar al renderizar sin afectar a la página entera: DnzTryComponent. La espera de una operación de IA: DnzIALoader. Elige por el momento de la carga, no por el aspecto.

Cuál va en cada caso

DnzLoader

Indicador de carga neutro para cuando una sección entera está cargando datos y aún no hay nada que mostrar. Es el patrón 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 indicador 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>

Parámetros

DnzSkeleton

Reserva el hueco con rectángulos animados que imitan la forma del contenido que va a llegar. A diferencia de DnzLoader, el usuario ve cuántas líneas y qué tamaño va a ocupar.

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

Combina varios esqueletos de distinto tamaño para imitar un encabezado más filas:

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

Parámetros

DnzDeferredContent

Envuelve un bloque pesado y aplaza su montaje: durante el retardo muestra un esqueleto y, pasado ese tiempo, monta el contenido real. Sirve para que las páginas con muchas subvistas aparezcan antes, en lugar de bloquearse renderizando todo a la vez.

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

Carga progresiva en un cuadro de mando: los KPIs aparecen primero y las tarjetas pesadas llegan escalonadas.

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

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

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

Si el esqueleto por defecto no sirve, pasa tu propio indicador de carga en LoadingContent:

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

Parámetros

DnzTryComponent

Envuelve un bloque que puede fallar al renderizar y captura la excepción para que no afecte a la página entera. Es un ErrorBoundary con un contenido alternativo opcional.

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

Con contenido alternativo propio: el context es la Exception capturada, así 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 Recover() por @ref para reintentar el renderizado tras un fallo:

<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 falló: @context.Message</span>
            <RadzenButton Text="Reintentar" Click=@(() => boundary.Recover()) />
        </div>
    </ErrorContent>
</DnzTryComponent>

@code {
    private DnzTryComponent boundary;
}

Parámetros

DnzIALoader

Indicador para operaciones de IA: icono animado con un texto debajo. Para la espera de un análisis, una extracción o una respuesta generada.

@if (_analizando)
{
    <DnzIALoader Text="Analizando el documento" />
}

Parámetros

Relacionado

• Diálogos y ventanas: DnzDialogLayout trae IsLoading y ErrorText para el cuerpo de un diálogo
• Tablas e informes: donde más rinden el diferido y los esqueletos al mostrar listados pesados
• KPIs y métricas: el caso de uso habitual de la carga progresiva con DnzDeferredContent
• Patrones de uso: ejemplos completos que combinan estos componentes con el SDK
• Componentes · DinaZen
• SDK .NET · Cliente Dinaup: trae los datos que estos componentes cubren mientras cargan