Performance Best Practices

Plugin performance directly affects the merchant experience. A slow plugin makes the admin feel slow.

1. Use useAutoResize instead of fixed heights

The useAutoResize() hook measures and reports content height changes efficiently. Avoid setting a fixed pixel height on your iframe container — it creates layout bugs as your content changes.

See the Hooks page for implementation details.

2. Minimize initial load time

The admin host shows loading states at these thresholds:

Keep your JavaScript bundle small and your initial render fast. Avoid blocking the render on non-critical data fetches.

3. Use the API client efficiently

const client = new WhataloClient({
  apiKey: process.env.WHATALO_API_KEY!,
  retries: 2, // Automatically retries on 5xx responses
});

• Use pagination parameters — never fetch all records in a single request
• Check client.rateLimit.remaining before making bulk requests
• Cache responses where appropriate to avoid redundant calls

4. Respect the resize rate limit

The bridge enforces a resize rate limit of 30 messages per 10 seconds. The useAutoResize() hook handles this automatically via debouncing — it only sends a resize message when the height delta exceeds 1px.

Avoid calling bridge.resize() manually in tight loops or animation callbacks.

5. Lazy-load non-critical content

Show the page structure and critical information immediately. Defer heavy content such as charts, data tables with many rows, or images until after the initial render.

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. Optimize images

If your plugin displays images, use appropriate dimensions and modern formats. Large images increase the reported content height, triggering additional resize messages and affecting perceived performance.