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/(dashboard)/projects/[projectId]/videos/[videoId]/compare/page.tsx
+26 -2
View File
@@ -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">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
<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">
{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>
);
}