src/components/page-skeleton.tsx

Linked repository file from this build.

"use client";

import { InboxLoading } from "@/features/inbox/inbox";
import { CatalogLoading } from "@/features/catalog/work-catalog";
import { WorkspaceLoading } from "@/features/reviews/workspace";
import { ReportsLoading } from "@/features/reports/reports-page";

import { ExportsLoading } from "@/features/exports/exports-page";
import { ImportsLoading } from "@/features/reviews/intake";
import { PolicyLoading } from "@/features/policy/page";
import { SearchLoading } from "@/features/reviews/search";

export function isReviewWorkspace(path: string) {
  return /^\/reviews\/[^/?]+/.test(path);
}

/** Route previews delegate layout to the destination components. */
export function PageSkeleton({
  label = "Loading page…",
  workspace = false,
  pathname = "",
  rows,
}: {
  label?: string;
  workspace?: boolean;
  pathname?: string;
  rows?: number;
}) {
  const path = pathname.split("?")[0];
  return (
    <div className="page-skeleton flex min-h-0 w-full flex-1 flex-col">
      {workspace || isReviewWorkspace(path) ? (
        <WorkspaceLoading />
      ) : path === "/dashboard" || label === "Loading Home…" ? (
        <InboxLoading />
      ) : path === "/reviews" || path === "/approval-queue" || label === "Loading reviews…" ? (
        <CatalogLoading queue={path === "/approval-queue"} rows={rows} />
      ) : path === "/reports" || label === "Loading reports…" ? (
        <ReportsLoading />
      ) : path === "/exports" ? (
        <ExportsLoading />
      ) : path === "/imports" ? (
        <ImportsLoading />
      ) : path === "/policy" ? (
        <PolicyLoading />
      ) : path === "/search" ? (
        <SearchLoading pathname={pathname} />
      ) : (
        <p role="status" className="text-sm text-muted-foreground">
          {label}
        </p>
      )}
    </div>
  );
}