yusufipek/OpenFrame
1
0
Fork 0
mirror of https://github.com/yusufipk/OpenFrame.git synced 2026-09-11 17:46:06 +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/watch/[videoId]/loading.tsx
+81
View File
@@ -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
+63 -2
View File
@@ -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">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
<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) => (
<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>
);
}