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`

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>
+  )
+}