37216e2a5a
Refactor components to remove Layout wrapper and pass it in the App component , implemented a skeleton feedback while loading page and improved API calls related to Dashboard/User Profile
61 lines
3.1 KiB
TypeScript
61 lines
3.1 KiB
TypeScript
import React from "react";
|
|
|
|
export default function UserProfileSkeleton() {
|
|
return (
|
|
<div className="bg-white min-h-screen p-6">
|
|
<div className="mt-6 bg-white p-6 rounded-lg flex gap-4 items-center">
|
|
<div className="h-64 w-60 bg-gray-300 animate-pulse rounded"></div>
|
|
<div className="flex-1">
|
|
<div className="h-12 w-64 bg-gray-300 animate-pulse rounded"></div>
|
|
<div className="flex justify-between items-center mt-1">
|
|
<div className="h-4 w-60 bg-gray-300 animate-pulse mt-2 rounded"></div>
|
|
<div className="h-8 w-32 bg-gray-300 animate-pulse mt-2 rounded"></div>
|
|
</div>
|
|
<div className="h-4 w-100 bg-gray-300 animate-pulse mt-2 rounded"></div>
|
|
<div className="mt-6 grid grid-cols-4 justify-item-start gap-4">
|
|
<div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
|
|
<div className="h-12 w-12 mx-2 bg-gray-300 animate-pulse rounded"></div>
|
|
<div className="flex flex-col">
|
|
<div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
|
|
<div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
|
|
<div className="h-12 w-12 mx-2 bg-gray-300 animate-pulse rounded"></div>
|
|
<div className="flex flex-col">
|
|
<div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
|
|
<div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
|
|
<div className="h-12 w-12 mx-2 bg-gray-300 animate-pulse rounded"></div>
|
|
<div className="flex flex-col">
|
|
<div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
|
|
<div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
|
|
<div className="h-12 w-12 mx-2 bg-gray-300 animate-pulse rounded"></div>
|
|
<div className="flex flex-col">
|
|
<div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
|
|
<div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-6 bg-white p-6 rounded-lg">
|
|
<div className="h-6 w-40 bg-gray-300 animate-pulse rounded mb-4"></div>
|
|
<div className="space-y-4">
|
|
{[...Array(4)].map((_, i) => (
|
|
<div key={i} className="flex justify-between items-center">
|
|
<div className="h-4 w-24 bg-gray-300 animate-pulse rounded"></div>
|
|
<div className="h-2 w-3/4 bg-gray-300 animate-pulse rounded"></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|