Loading and skeleton state

LoadingPanel.tsxOne panel, three states. Fixed height in every state, a delay before the skeleton shows, and a deadline after which it fails into an error with a retry.Copy

import { useEffect, useRef, useState, type ReactNode } from "react";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";

/** Three states, and loading is the only one with a clock on it. */
export type PanelState = "loading" | "ready" | "failed";

type Props = {
  title: string;
  state: PanelState;
  children?: ReactNode;
  /** Height in px, fixed for every state. The skeleton occupies the final
   *  space, so nothing on the page moves when the data lands. */
  height?: number;
  /** Under this, nothing shows: a fast query must never flash a skeleton. */
  delayMs?: number;
  /** Past this the panel stops claiming work is happening and fails into a
   *  state with a way out. A skeleton with no deadline is a lie that lasts. */
  timeoutMs?: number;
  onRetry: () => void;
  /** How long the query had been running when this mounted. Lets a server
   *  render show the skeleton rather than the pre-delay blank. */
  loadingFor?: number;
  className?: string;
};

const TICK = 250;

export function LoadingPanel({
  title, state, children, height = 70, delayMs = 300, timeoutMs = 10_000, onRetry, loadingFor = 0, className,
}: Props) {
  // Counted from mount rather than read from a clock, so the same markup
  // renders on the server and the browser and the deadline still fires.
  const [elapsed, setElapsed] = useState(loadingFor);
  useEffect(() => {
    if (state !== "loading") return;
    const t = setInterval(() => setElapsed((e) => e + TICK), TICK);
    return () => clearInterval(t);
  }, [state]);
  // A retry starts the clock again from zero, delay included.
  const prev = useRef(state);
  useEffect(() => {
    if (state === "loading" && prev.current !== "loading") setElapsed(0);
    prev.current = state;
  }, [state]);

  const timedOut = state === "failed" || elapsed >= timeoutMs;
  const showSkeleton = state === "loading" && !timedOut && elapsed >= delayMs;

  return (
    <div className={cn("rounded border bg-muted p-2.5", className)} style={{ height }} aria-busy={state === "loading"}>
      {state === "ready" && (
        <>
          <p className="text-[10px] text-muted-foreground">{title}</p>
          <div className="mt-2">{children}</div>
        </>
      )}
      {/* A shimmer says working; stillness would read as no data. */}
      {showSkeleton && (
        <>
          <Skeleton className="h-1.5 w-[58px] rounded-full bg-muted-foreground/20 motion-reduce:animate-none" />
          <Skeleton className="mt-2.5 h-[22px] w-[92px] bg-muted-foreground/20 motion-reduce:animate-none" />
        </>
      )}
      {timedOut && (
        <>
          <p className="text-[10px] text-muted-foreground">{title}</p>
          <p className="mt-1 text-[11px] text-status-critical">
            {state === "failed" ? "Query failed" : `No answer after ${Math.round(timeoutMs / 1000)}s`}
          </p>
          <Button variant="link" size="sm" className="h-auto p-0 text-[11px]" onClick={onRetry}>retry</Button>
        </>
      )}
    </div>
  );
}

demo.tsxHow it is called: five panels 1.2s in, one landed. Three more land over the next seconds; the last never answers and times out.Copy

import { useEffect, useState } from "react";
import { LoadingPanel, type PanelState } from "./LoadingPanel";
import { Sparkline } from "../sparkline/Sparkline";

/**
 * A grid mid-load, 1.2s in: one panel landed, four still querying. The
 * others land one by one over the next seconds, and the last one never
 * answers, so it hits the 10s deadline and fails into a state with a retry.
 */
const LANDS: Record<string, number | null> = { errors: 900, throughput: 1800, routes: 2600, saturation: null };

export default function Demo() {
  const [state, setState] = useState<Record<string, PanelState>>({
    errors: "loading", throughput: "loading", routes: "loading", saturation: "loading",
  });
  const [run, setRun] = useState(0);

  useEffect(() => {
    const timers = Object.entries(LANDS).flatMap(([id, ms]) =>
      ms === null ? [] : [setTimeout(() => setState((s) => ({ ...s, [id]: "ready" })), ms)]);
    return () => timers.forEach(clearTimeout);
  }, [run]);

  const retry = (id: string) => {
    setState((s) => ({ ...s, [id]: "loading" }));
    setRun((r) => r + 1);
  };
  const common = { loadingFor: 1200 };

  return (
    <div className="grid w-full max-w-[400px] grid-cols-3 gap-2.5 rounded-lg border bg-card p-4">
      <LoadingPanel title="p95 latency" state="ready" onRetry={() => {}} {...common}>
        <span className="text-muted-foreground"><Sparkline values={[38, 46, 40, 58, 52]} width={92} height={22} /></span>
      </LoadingPanel>
      <LoadingPanel title="Error rate" state={state.errors} onRetry={() => retry("errors")} {...common}>
        <p className="text-lg font-semibold tabular-nums text-card-foreground">0.42%</p>
      </LoadingPanel>
      <LoadingPanel title="Throughput" state={state.throughput} onRetry={() => retry("throughput")} {...common}>
        <p className="text-lg font-semibold tabular-nums text-card-foreground">1,284/s</p>
      </LoadingPanel>
      <LoadingPanel title="Latency by route" state={state.routes} onRetry={() => retry("routes")} className="col-span-2" {...common}>
        <span className="text-muted-foreground"><Sparkline values={[120, 132, 118, 141, 138, 126, 150, 144]} width={218} height={22} /></span>
      </LoadingPanel>
      <LoadingPanel title="Saturation" state={state.saturation} onRetry={() => retry("saturation")} {...common}>
        <p className="text-lg font-semibold tabular-nums text-card-foreground">71%</p>
      </LoadingPanel>
    </div>
  );
}