From d8ace420baa5c8a1abccd75e52570f2a232f193d Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Mon, 6 Jul 2026 13:13:00 +0400
Subject: [PATCH] feat(create): show a loading placeholder for the customizer
 and preview (#11093)

* feat(create): show a loading placeholder for the customizer and preview

* fix(create): render the placeholder as the suspense fallback so it prerenders
---
 .../(app)/create/components/create-skeleton.tsx   | 15 +++++++++++++++
 apps/v4/app/(app)/create/layout.tsx               |  6 +++++-
 apps/v4/app/(app)/create/loading.tsx              |  5 +++++
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 apps/v4/app/(app)/create/components/create-skeleton.tsx
 create mode 100644 apps/v4/app/(app)/create/loading.tsx

diff --git a/apps/v4/app/(app)/create/components/create-skeleton.tsx b/apps/v4/app/(app)/create/components/create-skeleton.tsx
new file mode 100644
index 000000000..e988e5475
--- /dev/null
+++ b/apps/v4/app/(app)/create/components/create-skeleton.tsx
@@ -0,0 +1,15 @@
+import { Skeleton } from "@/styles/base-nova/ui/skeleton"
+
+export function CreateSkeleton() {
+  return (
+    <div className="relative z-10 flex min-h-0 flex-1 flex-col overflow-hidden section-soft [--customizer-width:--spacing(48)] [--gap:--spacing(4)] md:[--gap:--spacing(6)] 2xl:[--customizer-width:--spacing(56)]">
+      <div
+        data-slot="designer"
+        className="flex min-h-0 flex-1 flex-col gap-(--gap) p-(--gap) pt-[calc(var(--gap)*0.25)] md:flex-row-reverse"
+      >
+        <Skeleton className="flex-1 rounded-2xl" />
+        <Skeleton className="min-h-[151px] w-full self-start rounded-2xl md:h-full md:max-h-full md:min-h-0 md:w-(--customizer-width)" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/app/(app)/create/layout.tsx b/apps/v4/app/(app)/create/layout.tsx
index a137fdbc4..3240eadc1 100644
--- a/apps/v4/app/(app)/create/layout.tsx
+++ b/apps/v4/app/(app)/create/layout.tsx
@@ -1,5 +1,6 @@
 import { Suspense } from "react"
 
+import { CreateSkeleton } from "@/app/(app)/create/components/create-skeleton"
 import { HistoryProvider } from "@/app/(app)/create/hooks/use-history"
 import { LocksProvider } from "@/app/(app)/create/hooks/use-locks"
 
@@ -10,7 +11,10 @@ export default function CreateLayout({
 }) {
   return (
     <LocksProvider>
-      <Suspense>
+      {/* HistoryProvider reads useSearchParams(), which opts this subtree out
+          of prerendering up to this boundary. The fallback is what paints on
+          first load, so it must be the page placeholder, not empty. */}
+      <Suspense fallback={<CreateSkeleton />}>
         <HistoryProvider>{children}</HistoryProvider>
       </Suspense>
     </LocksProvider>
diff --git a/apps/v4/app/(app)/create/loading.tsx b/apps/v4/app/(app)/create/loading.tsx
new file mode 100644
index 000000000..11f33f672
--- /dev/null
+++ b/apps/v4/app/(app)/create/loading.tsx
@@ -0,0 +1,5 @@
+import { CreateSkeleton } from "@/app/(app)/create/components/create-skeleton"
+
+export default function CreateLoading() {
+  return <CreateSkeleton />
+}