feat: Add loading skeletons for improved UX

- Implement loading states for dashboard, project, and video views
- Introduce skeleton UIs for settings pages
- Add skeletons for Navbar and charts
- Enhance `Skeleton` component with a text variant
- Improve perceived performance during data fetching
- Update `.gitignore` with `Optimization.md`

.gitignore

@@ -44,3 +44,4 @@ next-env.d.ts
 
 # Progress (Internal Tracking)
 PROGRESS.md
+Optimization.md

app/(dashboard)/dashboard/loading.tsx

@@ -0,0 +1,48 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardHeader, CardContent } from "@/components/ui/card"
+
+function ProjectCardSkeleton() {
+  return (
+    <Card className="h-full">
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-5 w-5 rounded" />
+            <Skeleton className="h-5 w-32" />
+          </div>
+          <Skeleton className="h-5 w-16 rounded-full" />
+        </div>
+        <Skeleton className="h-4 w-20 rounded-full mt-1" />
+        <Skeleton className="h-4 w-full mt-1" />
+        <Skeleton className="h-4 w-2/3" />
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center gap-4">
+          <Skeleton className="h-4 w-14" />
+          <Skeleton className="h-4 w-8" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function DashboardLoading() {
+  return (
+    <div className="px-6 lg:px-8 py-8 w-full">
+      <div className="flex items-center justify-between mb-8">
+        <div className="flex items-center gap-4">
+          <Skeleton className="h-9 w-40" />
+          <Skeleton className="h-9 w-[200px] rounded-md" />
+        </div>
+        <Skeleton className="h-9 w-32 rounded-md" />
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <ProjectCardSkeleton key={i} />
+        ))}
+      </div>
+    </div>
+  )
+}

app/(dashboard)/projects/[projectId]/loading.tsx

@@ -0,0 +1,53 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent } from "@/components/ui/card"
+
+function VideoCardSkeleton() {
+  return (
+    <Card className="overflow-hidden">
+      <Skeleton className="aspect-video w-full rounded-none" />
+      <CardContent className="p-4">
+        <Skeleton className="h-5 w-3/4 mb-2" />
+        <div className="flex items-center gap-3 mt-1">
+          <Skeleton className="h-4 w-10 rounded-full" />
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-4 w-12" />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function ProjectLoading() {
+  return (
+    <div className="px-6 lg:px-8 py-8 w-full">
+      <div className="mb-6">
+        <Skeleton className="h-4 w-32" />
+      </div>
+
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
+        <div>
+          <div className="flex items-center gap-2 mb-1">
+            <Skeleton className="h-9 w-48" />
+            <Skeleton className="h-5 w-16 rounded-full" />
+          </div>
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-5 w-24 rounded-full" />
+            <Skeleton className="h-4 w-40" />
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-8 w-20 rounded-md" />
+          <Skeleton className="h-8 w-24 rounded-md" />
+          <Skeleton className="h-8 w-24 rounded-md" />
+          <Skeleton className="h-8 w-28 rounded-md" />
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <VideoCardSkeleton key={i} />
+        ))}
+      </div>
+    </div>
+  )
+}

app/(dashboard)/projects/[projectId]/settings/loading.tsx

@@ -0,0 +1,67 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardHeader, CardContent } from "@/components/ui/card"
+
+export default function ProjectSettingsLoading() {
+  return (
+    <div className="px-6 lg:px-8 py-8 w-full">
+      <div className="max-w-xl mx-auto space-y-6">
+        <Skeleton className="h-4 w-32" />
+
+        <div>
+          <Skeleton className="h-9 w-48" />
+          <Skeleton className="h-4 w-72 mt-2" />
+        </div>
+
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-5 w-32" />
+            <Skeleton className="h-4 w-56 mt-1" />
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-10 w-full rounded-md" />
+            </div>
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-20 w-full rounded-md" />
+            </div>
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-16" />
+              <Skeleton className="h-10 w-full rounded-md" />
+            </div>
+            <Skeleton className="h-10 w-28 rounded-md" />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-5 w-16" />
+            <Skeleton className="h-4 w-64 mt-1" />
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-9 w-full rounded-md" />
+              <Skeleton className="h-9 w-20 rounded-md" />
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <Skeleton key={i} className="h-6 w-20 rounded-full" />
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="border-destructive/50">
+          <CardHeader>
+            <Skeleton className="h-5 w-28" />
+            <Skeleton className="h-4 w-72 mt-1" />
+          </CardHeader>
+          <CardContent>
+            <Skeleton className="h-10 w-32 rounded-md" />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

app/(dashboard)/projects/[projectId]/videos/[videoId]/compare/loading.tsx

@@ -0,0 +1,39 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Separator } from "@/components/ui/separator"
+
+function PlayerPanelSkeleton() {
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden border-r last:border-r-0">
+      <div className="shrink-0 flex items-center justify-center h-10 px-4 border-b bg-muted/30">
+        <Skeleton className="h-6 w-40 rounded-md" />
+      </div>
+      <div className="flex-1 bg-black" />
+      <div className="shrink-0 px-4 py-2 bg-background border-t">
+        <Skeleton className="h-4 w-24 mx-auto" />
+      </div>
+    </div>
+  )
+}
+
+export default function CompareLoading() {
+  return (
+    <div className="h-screen flex flex-col bg-background overflow-hidden">
+      <div className="shrink-0 flex items-center justify-between h-12 px-4 border-b bg-background/50">
+        <div className="flex items-center gap-3">
+          <Skeleton className="h-4 w-24" />
+          <Separator orientation="vertical" className="h-5" />
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-4 w-4" />
+            <Skeleton className="h-4 w-36" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 flex overflow-hidden">
+        <PlayerPanelSkeleton />
+        <PlayerPanelSkeleton />
+      </div>
+    </div>
+  )
+}

app/(dashboard)/projects/[projectId]/videos/[videoId]/compare/page.tsx

@@ -13,6 +13,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
+import { Skeleton } from '@/components/ui/skeleton';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -118,8 +119,31 @@ export default function CompareVersionsPage() {
 
   if (loading) {
     return (
-      <div className="h-screen flex items-center justify-center bg-background">
+      <div className="h-screen flex flex-col bg-background overflow-hidden">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        <div className="shrink-0 flex items-center justify-between h-12 px-4 border-b bg-background/50">
+          <div className="flex items-center gap-3">
+            <Skeleton className="h-4 w-24" />
+            <Separator orientation="vertical" className="h-5" />
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-4 w-4" />
+              <Skeleton className="h-4 w-36" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+          </div>
+        </div>
+        <div className="flex-1 flex overflow-hidden">
+          {Array.from({ length: 2 }).map((_, i) => (
+            <div key={i} className="flex-1 flex flex-col overflow-hidden border-r last:border-r-0">
+              <div className="shrink-0 flex items-center justify-center h-10 px-4 border-b bg-muted/30">
+                <Skeleton className="h-6 w-40 rounded-md" />
+              </div>
+              <div className="flex-1 bg-black" />
+              <div className="shrink-0 px-4 py-2 bg-background border-t">
+                <Skeleton className="h-4 w-24 mx-auto" />
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
     );
   }

app/(dashboard)/projects/[projectId]/videos/[videoId]/loading.tsx

@@ -0,0 +1,84 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Separator } from "@/components/ui/separator"
+
+function CommentSkeleton() {
+  return (
+    <div className="rounded-lg border p-3">
+      <div className="flex items-start justify-between gap-2 mb-2">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-6 w-6 rounded-full" />
+          <Skeleton className="h-4 w-20" />
+        </div>
+        <Skeleton className="h-5 w-14 rounded" />
+      </div>
+      <Skeleton className="h-4 w-full mb-1" />
+      <Skeleton className="h-4 w-2/3" />
+    </div>
+  )
+}
+
+export default function VideoPlayerLoading() {
+  return (
+    <div className="h-[calc(100vh-3.5rem)] flex flex-col bg-background overflow-hidden">
+      <div className="flex-1 flex overflow-hidden min-h-0">
+        <div className="flex-1 flex flex-col overflow-hidden min-h-0">
+          <div className="shrink-0 flex items-center justify-between h-12 px-4 border-b bg-background/50">
+            <div className="flex items-center gap-3">
+              <Skeleton className="h-4 w-12" />
+              <Separator orientation="vertical" className="h-5" />
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-4 w-36" />
+                <Skeleton className="h-4 w-24" />
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-8 w-32 rounded-md" />
+              <Skeleton className="h-8 w-28 rounded-md" />
+            </div>
+          </div>
+
+          <div className="flex-1 bg-black min-h-0" />
+
+          <div className="shrink-0 px-4 py-2 bg-background border-t">
+            <div className="flex items-center gap-1 mb-2">
+              <Skeleton className="h-8 w-8 rounded-md" />
+              <Skeleton className="h-8 w-8 rounded-md" />
+              <Skeleton className="h-8 w-8 rounded-md" />
+              <Skeleton className="h-8 w-8 rounded-md" />
+              <Skeleton className="h-4 w-24 ml-1" />
+              <div className="ml-auto">
+                <Skeleton className="h-8 w-12 rounded-md" />
+              </div>
+            </div>
+            <Skeleton className="h-8 w-full rounded" />
+          </div>
+        </div>
+
+        <div className="w-80 shrink-0 border-l bg-card flex flex-col overflow-hidden">
+          <div className="shrink-0 flex items-center justify-between p-4 border-b">
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-5 w-5" />
+              <Skeleton className="h-5 w-24" />
+              <Skeleton className="h-5 w-6 rounded-full" />
+            </div>
+            <Skeleton className="h-8 w-28 rounded-md" />
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-4 space-y-3">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <CommentSkeleton key={i} />
+            ))}
+          </div>
+
+          <div className="shrink-0 border-t p-4">
+            <Skeleton className="h-20 w-full rounded-md" />
+            <div className="flex items-center justify-between mt-2">
+              <Skeleton className="h-8 w-8 rounded-md" />
+              <Skeleton className="h-8 w-20 rounded-md" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/(dashboard)/projects/[projectId]/videos/[videoId]/page.tsx

@@ -39,6 +39,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Separator } from '@/components/ui/separator';
+import { Skeleton } from '@/components/ui/skeleton';
 import {
   Dialog,
   DialogContent,
@@ -1060,8 +1061,71 @@ export default function VideoPage() {
 
   if (loading) {
     return (
-      <div className="h-[calc(100vh-3.5rem)] flex items-center justify-center bg-background">
+      <div className="h-[calc(100vh-3.5rem)] flex flex-col bg-background overflow-hidden">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        <div className="flex-1 flex overflow-hidden min-h-0">
+          <div className="flex-1 flex flex-col overflow-hidden min-h-0">
+            <div className="shrink-0 flex items-center justify-between h-12 px-4 border-b bg-background/50">
+              <div className="flex items-center gap-3">
+                <Skeleton className="h-4 w-12" />
+                <Separator orientation="vertical" className="h-5" />
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-4 w-36" />
+                  <Skeleton className="h-4 w-24" />
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-8 w-32 rounded-md" />
+                <Skeleton className="h-8 w-28 rounded-md" />
+              </div>
+            </div>
+            <div className="flex-1 bg-black min-h-0" />
+            <div className="shrink-0 px-4 py-2 bg-background border-t">
+              <div className="flex items-center gap-1 mb-2">
+                <Skeleton className="h-8 w-8 rounded-md" />
+                <Skeleton className="h-8 w-8 rounded-md" />
+                <Skeleton className="h-8 w-8 rounded-md" />
+                <Skeleton className="h-8 w-8 rounded-md" />
+                <Skeleton className="h-4 w-24 ml-1" />
+                <div className="ml-auto">
+                  <Skeleton className="h-8 w-12 rounded-md" />
+                </div>
+              </div>
+              <Skeleton className="h-8 w-full rounded" />
+            </div>
+          </div>
+          <div className="w-80 shrink-0 border-l bg-card flex flex-col overflow-hidden">
+            <div className="shrink-0 flex items-center justify-between p-4 border-b">
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-5 w-5" />
+                <Skeleton className="h-5 w-24" />
+                <Skeleton className="h-5 w-6 rounded-full" />
+              </div>
+              <Skeleton className="h-8 w-28 rounded-md" />
+            </div>
+            <div className="flex-1 overflow-y-auto p-4 space-y-3">
+              {Array.from({ length: 5 }).map((_, i) => (
+                <div key={i} className="rounded-lg border p-3">
+                  <div className="flex items-start justify-between gap-2 mb-2">
+                    <div className="flex items-center gap-2">
+                      <Skeleton className="h-6 w-6 rounded-full" />
+                      <Skeleton className="h-4 w-20" />
+                    </div>
+                    <Skeleton className="h-5 w-14 rounded" />
+                  </div>
+                  <Skeleton className="h-4 w-full mb-1" />
+                  <Skeleton className="h-4 w-2/3" />
+                </div>
+              ))}
+            </div>
+            <div className="shrink-0 border-t p-4">
+              <Skeleton className="h-20 w-full rounded-md" />
+              <div className="flex items-center justify-between mt-2">
+                <Skeleton className="h-8 w-8 rounded-md" />
+                <Skeleton className="h-8 w-20 rounded-md" />
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

app/(dashboard)/settings/loading.tsx

@@ -0,0 +1,72 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardHeader, CardContent } from "@/components/ui/card"
+
+function SettingsCardSkeleton({ rows }: { rows: number }) {
+  return (
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-5 w-40" />
+        <Skeleton className="h-4 w-64 mt-1" />
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {Array.from({ length: rows }).map((_, i) => (
+          <div key={i} className="flex items-center justify-between">
+            <div className="space-y-1">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-3 w-48" />
+            </div>
+            <Skeleton className="h-5 w-10 rounded-full" />
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function SettingsLoading() {
+  return (
+    <div className="px-6 lg:px-8 py-8 w-full">
+      <div className="max-w-2xl mx-auto space-y-6">
+        <div>
+          <Skeleton className="h-9 w-56" />
+          <Skeleton className="h-4 w-80 mt-2" />
+        </div>
+
+        <SettingsCardSkeleton rows={5} />
+
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-5 w-48" />
+            <Skeleton className="h-4 w-72 mt-1" />
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-10 w-full rounded-md" />
+            </div>
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-10 w-full rounded-md" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <SettingsCardSkeleton rows={3} />
+
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-5 w-28" />
+            <Skeleton className="h-4 w-60 mt-1" />
+          </CardHeader>
+          <CardContent>
+            <Skeleton className="h-10 w-full rounded-md" />
+          </CardContent>
+        </Card>
+
+        <div className="flex justify-end">
+          <Skeleton className="h-10 w-32 rounded-md" />
+        </div>
+      </div>
+    </div>
+  )
+}

app/(dashboard)/settings/page.tsx

@@ -7,6 +7,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
+import { Skeleton } from '@/components/ui/skeleton';
 import { Badge } from '@/components/ui/badge';
 import {
   Select,
@@ -177,8 +178,33 @@ export default function SettingsPage() {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-24">
+      <div className="max-w-2xl mx-auto py-8 px-4 space-y-6">
-        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        <div>
+          <Skeleton className="h-9 w-56" />
+          <Skeleton className="h-4 w-80 mt-2" />
+        </div>
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Card key={i}>
+            <CardHeader>
+              <Skeleton className="h-5 w-40" />
+              <Skeleton className="h-4 w-64 mt-1" />
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {Array.from({ length: 3 }).map((_, j) => (
+                <div key={j} className="flex items-center justify-between">
+                  <div className="space-y-1">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-3 w-48" />
+                  </div>
+                  <Skeleton className="h-5 w-10 rounded-full" />
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        ))}
+        <div className="flex justify-end">
+          <Skeleton className="h-10 w-32 rounded-md" />
+        </div>
       </div>
     );
   }

app/(dashboard)/workspaces/loading.tsx

@@ -0,0 +1,44 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardHeader, CardContent } from "@/components/ui/card"
+
+function WorkspaceCardSkeleton() {
+  return (
+    <Card className="h-full">
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-5 w-5 rounded" />
+          <Skeleton className="h-5 w-36" />
+        </div>
+        <Skeleton className="h-4 w-full mt-1" />
+        <Skeleton className="h-4 w-1/2" />
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center gap-4">
+          <Skeleton className="h-4 w-14" />
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-4 w-8" />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default function WorkspacesLoading() {
+  return (
+    <div className="px-6 lg:px-8 py-8 w-full">
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <Skeleton className="h-9 w-48" />
+          <Skeleton className="h-4 w-72 mt-2" />
+        </div>
+        <Skeleton className="h-9 w-40 rounded-md" />
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <WorkspaceCardSkeleton key={i} />
+        ))}
+      </div>
+    </div>
+  )
+}

app/watch/[videoId]/loading.tsx

@@ -0,0 +1,81 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Separator } from "@/components/ui/separator"
+
+function CommentSkeleton() {
+  return (
+    <div className="rounded-lg border p-3">
+      <div className="flex items-start justify-between gap-2 mb-2">
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-6 w-6 rounded-full" />
+          <Skeleton className="h-4 w-20" />
+        </div>
+        <Skeleton className="h-5 w-14 rounded" />
+      </div>
+      <Skeleton className="h-4 w-full mb-1" />
+      <Skeleton className="h-4 w-2/3" />
+    </div>
+  )
+}
+
+export default function WatchLoading() {
+  return (
+    <div className="h-screen flex flex-col bg-background overflow-hidden">
+      <div className="flex-1 flex overflow-hidden">
+        <div className="flex-1 flex flex-col overflow-hidden">
+          <div className="shrink-0 flex items-center justify-between h-12 px-4 border-b bg-background/50">
+            <div className="flex items-center gap-3">
+              <Skeleton className="h-4 w-12" />
+              <Separator orientation="vertical" className="h-5" />
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-4 w-36" />
+                <Skeleton className="h-4 w-24" />
+              </div>
+            </div>
+            <Skeleton className="h-8 w-32 rounded-md" />
+          </div>
+
+          <div className="flex-1 bg-black" />
+
+          <div className="shrink-0 px-4 py-2 bg-background border-t">
+            <div className="flex items-center gap-1 mb-2">
+              <Skeleton className="h-8 w-8 rounded-md" />
+              <Skeleton className="h-8 w-8 rounded-md" />
+              <Skeleton className="h-8 w-8 rounded-md" />
+              <Skeleton className="h-8 w-8 rounded-md" />
+              <Skeleton className="h-4 w-24 ml-1" />
+              <div className="ml-auto">
+                <Skeleton className="h-8 w-12 rounded-md" />
+              </div>
+            </div>
+            <Skeleton className="h-8 w-full rounded" />
+          </div>
+        </div>
+
+        <div className="w-80 shrink-0 border-l bg-card flex flex-col overflow-hidden">
+          <div className="shrink-0 flex items-center justify-between p-4 border-b">
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-5 w-5" />
+              <Skeleton className="h-5 w-24" />
+              <Skeleton className="h-5 w-6 rounded-full" />
+            </div>
+            <Skeleton className="h-8 w-28 rounded-md" />
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-4 space-y-3">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <CommentSkeleton key={i} />
+            ))}
+          </div>
+
+          <div className="shrink-0 border-t p-4">
+            <Skeleton className="h-20 w-full rounded-md" />
+            <div className="flex items-center justify-between mt-2">
+              <Skeleton className="h-8 w-8 rounded-md" />
+              <Skeleton className="h-8 w-20 rounded-md" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/watch/[videoId]/page.tsx

@@ -34,6 +34,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Input } from '@/components/ui/input';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Separator } from '@/components/ui/separator';
+import { Skeleton } from '@/components/ui/skeleton';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -957,8 +958,68 @@ export default function WatchPage() {
 
   if (loading) {
     return (
-      <div className="h-screen flex items-center justify-center bg-background">
+      <div className="h-screen flex flex-col bg-background overflow-hidden">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        <div className="flex-1 flex overflow-hidden">
+          <div className="flex-1 flex flex-col overflow-hidden">
+            <div className="shrink-0 flex items-center justify-between h-12 px-4 border-b bg-background/50">
+              <div className="flex items-center gap-3">
+                <Skeleton className="h-4 w-12" />
+                <Separator orientation="vertical" className="h-5" />
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-4 w-36" />
+                  <Skeleton className="h-4 w-24" />
+                </div>
+              </div>
+              <Skeleton className="h-8 w-32 rounded-md" />
+            </div>
+            <div className="flex-1 bg-black" />
+            <div className="shrink-0 px-4 py-2 bg-background border-t">
+              <div className="flex items-center gap-1 mb-2">
+                <Skeleton className="h-8 w-8 rounded-md" />
+                <Skeleton className="h-8 w-8 rounded-md" />
+                <Skeleton className="h-8 w-8 rounded-md" />
+                <Skeleton className="h-8 w-8 rounded-md" />
+                <Skeleton className="h-4 w-24 ml-1" />
+                <div className="ml-auto">
+                  <Skeleton className="h-8 w-12 rounded-md" />
+                </div>
+              </div>
+              <Skeleton className="h-8 w-full rounded" />
+            </div>
+          </div>
+          <div className="w-80 shrink-0 border-l bg-card flex flex-col overflow-hidden">
+            <div className="shrink-0 flex items-center justify-between p-4 border-b">
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-5 w-5" />
+                <Skeleton className="h-5 w-24" />
+                <Skeleton className="h-5 w-6 rounded-full" />
+              </div>
+              <Skeleton className="h-8 w-28 rounded-md" />
+            </div>
+            <div className="flex-1 overflow-y-auto p-4 space-y-3">
+              {Array.from({ length: 5 }).map((_, i) => (
+                <div key={i} className="rounded-lg border p-3">
+                  <div className="flex items-start justify-between gap-2 mb-2">
+                    <div className="flex items-center gap-2">
+                      <Skeleton className="h-6 w-6 rounded-full" />
+                      <Skeleton className="h-4 w-20" />
+                    </div>
+                    <Skeleton className="h-5 w-14 rounded" />
+                  </div>
+                  <Skeleton className="h-4 w-full mb-1" />
+                  <Skeleton className="h-4 w-2/3" />
+                </div>
+              ))}
+            </div>
+            <div className="shrink-0 border-t p-4">
+              <Skeleton className="h-20 w-full rounded-md" />
+              <div className="flex items-center justify-between mt-2">
+                <Skeleton className="h-8 w-8 rounded-md" />
+                <Skeleton className="h-8 w-20 rounded-md" />
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-muted animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }