Rendimiento

El rendimiento del plugin afecta directamente la experiencia del comerciante. Un plugin lento hace que el admin se sienta lento.

1. Usa useAutoResize en vez de alturas fijas

El hook useAutoResize() mide y reporta los cambios de altura del contenido de forma eficiente. Evita establecer una altura fija en píxeles en el contenedor de tu iframe — esto crea bugs de layout a medida que tu contenido cambia.

Consulta la página de Hooks para detalles de implementación.

2. Minimiza el tiempo de carga inicial

El host del admin muestra estados de carga en estos umbrales:

Mantén tu bundle de JavaScript pequeño y tu render inicial rápido. Evita bloquear el render en peticiones de datos no críticos.

3. Usa el cliente API de forma eficiente

const client = new WhataloClient({
  apiKey: process.env.WHATALO_API_KEY!,
  retries: 2, // Reintenta automáticamente en respuestas 5xx
});

• Usa parámetros de paginación — nunca obtengas todos los registros en una sola solicitud
• Verifica client.rateLimit.remaining antes de hacer solicitudes masivas
• Almacena respuestas en caché donde sea apropiado para evitar llamadas redundantes

4. Respeta el límite de rate de resize

El bridge aplica un límite de rate de resize de 30 mensajes por 10 segundos. El hook useAutoResize() maneja esto automáticamente mediante debouncing — solo envía un mensaje de resize cuando el delta de altura supera 1px.

Evita llamar bridge.resize() manualmente en bucles cerrados o callbacks de animación.

5. Carga diferida de contenido no crítico

Muestra la estructura de la página y la información crítica inmediatamente. Difiere el contenido pesado como gráficos, tablas de datos con muchas filas o imágenes hasta después del render inicial.

import { Spinner } from "./components/whatalo-ui";
import { Suspense, lazy } from "react";

// Load the analytics chart only when the page is ready
const AnalyticsChart = lazy(() => import("./AnalyticsChart"));

function DashboardPage() {
  return (
    <Page>
      <PageHeader title="Dashboard" />
      <Suspense fallback={<Spinner />}>
        <AnalyticsChart />
      </Suspense>
    </Page>
  );
}

6. Optimiza las imágenes

Si tu plugin muestra imágenes, usa dimensiones apropiadas y formatos modernos. Las imágenes grandes aumentan la altura del contenido reportada, activando mensajes de resize adicionales y afectando el rendimiento percibido.