mirror of
https://github.com/yusufipk/OpenFrame.git
synced 2026-09-11 17:46:06 +00:00
Yusuf İpek
48ddb03995
- 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`
68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
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>
|
|
)
|
|
}
|