src/components/loading-preview.tsx

Linked repository file from this build.

"use client";

import type { ReactNode } from "react";

/** Render the real layout; placeholder records never become accessible or interactive. */
export function LoadingPreview({
  children,
  loading = true,
  label = "Loading content…",
  className = "",
  contentClassName = "",
}: {
  children: ReactNode;
  loading?: boolean;
  label?: string;
  className?: string;
  contentClassName?: string;
}) {
  return (
    <div className={className} aria-busy={loading || undefined}>
      {loading && (
        <span role="status" className="sr-only">
          {label}
        </span>
      )}
      <div
        className={`${loading ? "skeleton-ui" : ""} ${contentClassName}`}
        aria-hidden={loading || undefined}
        inert={loading}
      >
        {children}
      </div>
    </div>
  );
}