Comb

Empty, loading and error states

Every list has three states besides the data: still loading, nothing here, and failed. Each says what is true and what to do, and none of them shows made-up data.

Previewapps/web/components/admin/useAdminLoad.ts

Loading

Nothing under a second. Skeleton rows from one to three seconds, sized like real rows so the list doesn't jump. Progress to ten seconds, then a background task.

Show code
<SkeletonRows variant="desk" count={3} />

Empty

One serif line saying what is true, one line saying what to do, one action that resolves it. The tone depends on the cause: first use teaches, all clear celebrates, no results suggests clearing a filter.

No requests in this queue

New requests appear here as customers write in. Clear the filters to see everything.

Clear filters
A single bee visits up to 1,500 flowers a day — KiBee is just as tireless in the background.
Show code
<AdminEmptyState variant="visitors" title="No conversations yet" description="…" action={{ label: "Install the widget", href: "…" }} />

Error

Say what happened and what to do, next to the thing that failed, with a retry. The load hook keeps foreground retry and background refresh apart, so a failed refresh doesn't wipe the list.

Show code
<AdminLoadError message={loadErrorCopy("this queue")} onRetry={retry} />
The wiring

Use useAdminLoad for every data load. Never show fallback or sample data as if it were real.

Show code
const load = useAdminLoad("conversations", fetchConversations, []);

if (load.status === "loading") return <SkeletonRows variant="conv" />;
if (load.status === "error") return <AdminLoadError message={loadErrorCopy("conversations")} onRetry={load.retry} reason={load.error} />;
if (load.data.length === 0) return <AdminEmptyState variant="visitors" action={…} />;

Feature off

When the API answers 503 because an optional feature is switched off, say which feature and where to turn it on. Do not print the status code. Tell it apart from a real failure with isFeatureOffError(err).

This needs the bee mesh feature. Turn it on in Feature flags, then come back.

Show code
<SettingsFeatureOff feature="bee mesh" />