Viewer Frame

Loading, error, and empty states for async viewers.

Preview

About

Domain data is never in hand at first paint — a bigWig arrives by HTTP range, a structure from AFDB, an alignment from a job queue — so a viewer has four states, not one. And 'empty' is its own message here: 'no features in this window' is a fact about where you're looking, not about what you loaded. ViewerFrame owns the header, toolbar slot, skeleton, error, and empty copy, holds a stable height so the page doesn't jump when data lands, and keeps children mounted through a refetch so a canvas or WebGL context survives. useViewerData pairs with it: abortable loads, last-good data retained, status derived.

Usage

import { ViewerFrame, useViewerData } from "@/components/ui/viewer-frame"

const { data, status, error, reload } = useViewerData(
  (signal) => fetchFeatures(locus, signal),
  [locus],
  { isEmpty: (d) => d.length === 0 }
)

<ViewerFrame title="GENCODE" status={status} error={error} onRetry={reload} height={220}>
  <TrackViewer tracks={data ?? []} />
</ViewerFrame>