Gabriel Kaszewski
38e107ad59
- Implemented Skeleton component for loading states. - Added Slider component using Radix UI for customizable sliders. - Created Toaster component for notifications with theme support. - Developed Switch component for toggle functionality. - Introduced Table component with subcomponents for structured data display. - Built Tabs component for tabbed navigation. - Added Textarea component for multi-line text input. - Implemented Toggle Group and Toggle components for grouped toggle buttons. - Created Tooltip component for displaying additional information on hover. - Added User Avatar component for displaying user images with fallback. - Implemented useIsMobile hook for responsive design. - Created API utility functions for user and thought data fetching. - Added utility function for class name merging. - Updated package.json with new dependencies for UI components and utilities. - Added TypeScript configuration for path aliasing.
31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
// app/users/[username]/loading.tsx
|
|
import { Card } from "@/components/ui/card";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
// This is the ProfileSkeleton component from the previous step.
|
|
// Next.js will automatically render this while page.tsx is loading.
|
|
export default function ProfileLoading() {
|
|
return (
|
|
<div>
|
|
<Skeleton className="h-48 w-full" />
|
|
<main className="container mx-auto max-w-3xl p-4 -mt-16">
|
|
<Card className="p-6">
|
|
<div className="flex items-end gap-4">
|
|
<Skeleton className="h-24 w-24 rounded-full" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-8 w-40" />
|
|
<Skeleton className="h-4 w-24" />
|
|
</div>
|
|
</div>
|
|
<Skeleton className="h-6 w-full mt-4" />
|
|
<Skeleton className="h-6 w-3/4 mt-2" />
|
|
</Card>
|
|
<div className="mt-8 space-y-4">
|
|
<Skeleton className="h-32 w-full" />
|
|
<Skeleton className="h-32 w-full" />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|