From f46cd6028f8a2ba0f6a3aa783be8ce2026bafb40 Mon Sep 17 00:00:00 2001
From: Luis Llanes <luisllaboj@gmail.com>
Date: Sat, 10 May 2025 13:54:58 -0700
Subject: [PATCH] fix: Loading skeleton for theme preview panel

---
 components/editor/theme-preview-panel.tsx        |  6 +++---
 .../theme-preview/examples-preview-container.tsx | 16 ++++++++++------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/components/editor/theme-preview-panel.tsx b/components/editor/theme-preview-panel.tsx
index 31a649db..6b44d1d8 100644
--- a/components/editor/theme-preview-panel.tsx
+++ b/components/editor/theme-preview-panel.tsx
@@ -48,7 +48,7 @@ const ThemePreviewPanel = ({
           isFullscreen && "fixed inset-0 z-50 bg-background"
         )}
       >
-        <Tabs defaultValue="cards" className="flex flex-col overflow-hidden">
+        <Tabs defaultValue="cards" className="flex flex-col overflow-hidden flex-1" >
           <div className="flex items-center justify-between px-4 mt-2">
             <TabsList className="inline-flex w-fit items-center justify-center rounded-full bg-background px-0 text-muted-foreground">
               <TabsTriggerPill value="cards">Cards</TabsTriggerPill>
@@ -103,7 +103,7 @@ const ThemePreviewPanel = ({
             </div>
           </div>
 
-          <ScrollArea className="rounded-lg flex flex-col flex-1 border m-4 mt-2 overflow-hidden">
+          <ScrollArea className="rounded-lg flex flex-col flex-1 border m-4 mt-2 overflow-hidden relative">
             <div className="flex flex-col flex-1 h-full">
               <TabsContent value="cards" className="space-y-6 my-4 px-4 h-full">
                 <ExamplesPreviewContainer>
@@ -140,7 +140,7 @@ const ThemePreviewPanel = ({
 
               <TabsContent
                 value="dashboard"
-                className="space-y-6 mt-0 h-full @container relative"
+                className="space-y-6 mt-0 h-full @container"
               >
                 <ExamplesPreviewContainer className="min-w-[1400px]">
                   <DemoDashboard />
diff --git a/components/editor/theme-preview/examples-preview-container.tsx b/components/editor/theme-preview/examples-preview-container.tsx
index 1586b869..03100557 100644
--- a/components/editor/theme-preview/examples-preview-container.tsx
+++ b/components/editor/theme-preview/examples-preview-container.tsx
@@ -1,12 +1,16 @@
 import { Suspense } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
+import { Loading } from "@/components/loading";
+
 const LoadingSkeleton = () => (
-  <div className="flex w-fit p-4 flex-col space-y-3 min-h-full">
-    <Skeleton className="h-[225px] w-full rounded-xl" />
-    <div className="space-y-2">
-      <Skeleton className="h-4 w-[250px]" />
-      <Skeleton className="h-4 w-[200px]" />
+  <div className="absolute inset-0 flex flex-col">
+    <div className="flex flex-1 flex-col">
+      <Skeleton className="w-full flex-1 opacity-50" />
+    </div>
+
+    <div className="absolute inset-0 flex items-center justify-center">
+      <Loading />
     </div>
   </div>
 );
@@ -20,7 +24,7 @@ const ExamplesPreviewContainer = ({
 }) => {
   return (
     <div className={cn("space-y-6", className)}>
-      <div className="space-y-6 mt-0 h-full">
+      <div className="mt-0 h-full space-y-6">
         <Suspense fallback={<LoadingSkeleton />}>{children}</Suspense>
       </div>
     </div>