yusufipek/OpenFrame
1
0
Fork 0
mirror of https://github.com/yusufipk/OpenFrame.git synced 2026-09-11 09:36:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add loading skeletons for improved UX

Browse Source 
- 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`
This commit is contained in:
Yusuf İpek
2026-02-07 15:15:02 +03:00
parent 5856c42181
commit 48ddb03995
14 changed files with 686 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(dashboard)/settings/loading.tsx
+72
View File
@@ -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
+28 -2
View File
@@ -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">
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
<div className="max-w-2xl mx-auto py-8 px-4 space-y-6">
<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>
);
}