130ecac208
Implemented comprehensive Chromebook-specific fixes including viewport adjustments, enhanced touch and keyboard detection, improved scrolling and keyboard navigation hooks, and extensive CSS optimizations for better usability. Updated chat and dashboard interfaces for larger touch targets, better focus management, and responsive layouts. Added documentation in docs/CHROMEBOOK-FIXES.md and new hooks for Chromebook scroll and keyboard handling.
78 lines
3.0 KiB
TypeScript
78 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import Layout from "@/components/layout/layout";
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
export default function DashboardLoading() {
|
|
return (
|
|
<Layout>
|
|
<div className="space-y-6 animate-in fade-in duration-500">
|
|
{/* Header skeleton with greeting & quote */}
|
|
<div>
|
|
<Skeleton className="h-8 w-72 mb-2" />
|
|
<Skeleton className="h-4 w-96" />
|
|
</div>
|
|
|
|
{/* Order statistics skeletons */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
|
|
{[...Array(4)].map((_, i) => (
|
|
<Card key={i} className="border-border/40 shadow-sm">
|
|
<CardHeader className="pb-2">
|
|
<div className="text-sm text-muted-foreground">
|
|
<Skeleton className="h-4 w-24" />
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<CardTitle>
|
|
<Skeleton className="h-7 w-16" />
|
|
</CardTitle>
|
|
<Skeleton className="h-8 w-8 rounded-full" />
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Best selling products skeleton */}
|
|
<Card className="border-border/40 shadow-sm mt-8 relative">
|
|
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
|
<div className="flex flex-col items-center justify-center bg-background/80 backdrop-blur-[2px] p-6 rounded-lg">
|
|
<Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
|
|
<p className="text-lg font-medium">Loading dashboard data...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<div>
|
|
<CardTitle>
|
|
<Skeleton className="h-6 w-52" />
|
|
</CardTitle>
|
|
<div className="text-sm text-muted-foreground">
|
|
<Skeleton className="h-4 w-80 mt-1" />
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent className="opacity-30">
|
|
<div className="space-y-4">
|
|
{[...Array(5)].map((_, i) => (
|
|
<div key={i} className="flex items-center gap-4">
|
|
<Skeleton className="h-12 w-12 rounded-md" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-40" />
|
|
<Skeleton className="h-4 w-20" />
|
|
</div>
|
|
<div className="ml-auto text-right">
|
|
<Skeleton className="h-4 w-16 ml-auto" />
|
|
<Skeleton className="h-4 w-16 ml-auto mt-2" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|