opensource/tweakcn
3
0
Fork 0
mirror of https://github.com/jnsahaj/tweakcn.git synced 2026-09-24 23:31:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: Loading skeleton for theme preview panel

Browse Source
This commit is contained in:
Luis Llanes
2025-05-11 02:31:45 +05:30
committed by Sahaj Jain
parent 9985e690de
commit f46cd6028f
2 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/editor/theme-preview-panel.tsx
+3 -3
View File
@@ -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 />
components/editor/theme-preview/examples-preview-container.tsx
+10 -6
View File
@@ -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>