import { lazy, Suspense, type ComponentProps, type ComponentType } from "react";

/** Keep the surrounding workspace usable while an optional surface loads. */
export function deferred<Component extends ComponentType<any>>(load: () => Promise<Component>) {
  const Surface = lazy(async () => ({ default: await load() })) as ComponentType<ComponentProps<Component>>;
  return function Deferred(props: ComponentProps<Component>) {
    return <Suspense fallback={<p className="ds-supporting-copy" role="status">Loading…</p>}><Surface {...props} /></Suspense>;
  };
}