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.
62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
|
import Layout from "@/components/layout/layout";
|
|
|
|
export default function AnalyticsLoading() {
|
|
return (
|
|
<Layout>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<Skeleton className="h-8 w-64 mb-2" />
|
|
<Skeleton className="h-4 w-96" />
|
|
</div>
|
|
|
|
{/* Metrics Cards */}
|
|
<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}>
|
|
<CardHeader className="pb-2">
|
|
<Skeleton className="h-4 w-24" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Skeleton className="h-8 w-20 mb-2" />
|
|
<Skeleton className="h-3 w-32" />
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Completion Rate Card */}
|
|
<Card>
|
|
<CardHeader>
|
|
<Skeleton className="h-6 w-48 mb-2" />
|
|
<Skeleton className="h-4 w-80" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center gap-4">
|
|
<Skeleton className="h-8 w-16" />
|
|
<div className="flex-1">
|
|
<Skeleton className="h-2 w-full" />
|
|
</div>
|
|
<Skeleton className="h-6 w-20" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Analytics Tabs */}
|
|
<div className="space-y-6">
|
|
<Skeleton className="h-10 w-full" />
|
|
<Card>
|
|
<CardHeader>
|
|
<Skeleton className="h-6 w-48 mb-2" />
|
|
<Skeleton className="h-4 w-80" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Skeleton className="h-64 w-full" />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|