refactor: enhance loading components with improved skeleton structure and styling
This commit is contained in:
shiva raj badu
parent
a7bd9ace23
commit
78e6318c71
2 changed files with 71 additions and 61 deletions
|
|
@ -1,58 +1,67 @@
|
|||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Card } from '@/components/ui/card'
|
||||
|
||||
const Loading = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-6 py-8">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<Skeleton className="h-9 w-48 mx-auto mb-2" />
|
||||
<Skeleton className="h-5 w-64 mx-auto" />
|
||||
const TemplateCardSkeleton = () => (
|
||||
<Card className="overflow-hidden shadow-none sm:shadow-none relative">
|
||||
<Skeleton className="absolute top-2 left-2 h-6 w-20 rounded-full z-40" />
|
||||
<img src="/card_bg.svg" alt="" className="absolute top-0 left-0 w-full h-full object-cover" />
|
||||
<div className="p-5">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<Skeleton key={i} className="aspect-video rounded" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-5 bg-white border-t border-[#EDEEEF] relative z-40">
|
||||
<div className="w-[191px]">
|
||||
<Skeleton className="h-4 w-28 mb-2" />
|
||||
<Skeleton className="h-3 w-full mb-1" />
|
||||
<Skeleton className="h-3 w-3/4" />
|
||||
</div>
|
||||
<Skeleton className="h-4 w-4" />
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
|
||||
{/* Inbuilt Templates Section */}
|
||||
<section className="mb-12">
|
||||
<Skeleton className="h-6 w-40 mb-6" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{Array.from({ length: 4 }).map((_, idx) => (
|
||||
<Card key={idx} className="overflow-hidden">
|
||||
<div className="p-5">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<Skeleton className="h-6 w-28" />
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="h-6 w-8 rounded-full" />
|
||||
<Skeleton className="h-4 w-4" />
|
||||
const Loading = () => {
|
||||
return (
|
||||
<div className="min-h-screen relative font-syne">
|
||||
<div
|
||||
className="fixed z-0 -bottom-[16.5rem] left-0 w-full h-full"
|
||||
style={{
|
||||
height: '341px',
|
||||
borderRadius: '1440px',
|
||||
background: 'radial-gradient(5.92% 104.69% at 50% 100%, rgba(122, 90, 248, 0.00) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(122, 90, 248, 0.80) 0%, rgba(122, 90, 248, 0.00) 100%)',
|
||||
}}
|
||||
/>
|
||||
<div className="sticky top-0 right-0 z-50 py-[28px] px-6 backdrop-blur">
|
||||
<div className="flex xl:flex-row flex-col gap-6 xl:gap-0 items-center justify-between">
|
||||
<Skeleton className="h-[34px] w-[180px] rounded-lg" />
|
||||
<div className="flex gap-2.5 max-sm:w-full max-md:justify-center max-sm:flex-wrap">
|
||||
<Skeleton className="h-[42px] w-[160px] rounded-[48px]" />
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="h-4 w-full mb-1" />
|
||||
<Skeleton className="h-4 w-3/4 mb-4" />
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<Skeleton key={i} className="aspect-video rounded" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Custom Templates Section */}
|
||||
<section>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<Skeleton className="h-6 w-48" />
|
||||
<Skeleton className="h-10 w-44 rounded-md" />
|
||||
</div>
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Skeleton className="h-8 w-8 rounded-full" />
|
||||
<Skeleton className="h-5 w-48 ml-3" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
<div className="mx-auto px-6 py-8">
|
||||
<div className="p-1 rounded-[40px] bg-[#ffffff] w-fit border border-[#EDEEEF] flex items-center justify-center">
|
||||
<Skeleton className="h-8 w-20 rounded-[70px]" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="mx-1" width="2" height="17" viewBox="0 0 2 17" fill="none">
|
||||
<path d="M1 0V16.5" stroke="#EDECEC" strokeWidth="2" />
|
||||
</svg>
|
||||
<Skeleton className="h-8 w-20 rounded-[70px]" />
|
||||
</div>
|
||||
|
||||
<section className="my-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{Array.from({ length: 4 }).map((_, idx) => (
|
||||
<TemplateCardSkeleton key={idx} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Loading
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,20 @@
|
|||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
|
||||
const ThemeCardSkeleton = () => (
|
||||
<div className="rounded-xl px-6 border border-[#EDEEEF] w-[305px] bg-white overflow-hidden">
|
||||
{/* Preview area */}
|
||||
<div className="relative h-[250px] p-6">
|
||||
{/* Top badges */}
|
||||
<div className="absolute top-2 left-2 flex items-center gap-2 z-10">
|
||||
<div className="rounded-xl border w-[305px] bg-white border-[#EDEEEF]">
|
||||
<div className="relative h-[250px] flex justify-center items-center">
|
||||
<img src="/card_bg.svg" alt="" className="absolute top-0 z-[1] left-0 w-[99%] h-full object-cover" />
|
||||
<div className="absolute top-0 left-0 flex items-center gap-2 z-[2] p-2">
|
||||
<Skeleton className="h-6 w-16 rounded-full" />
|
||||
<Skeleton className="h-6 w-20 rounded-full" />
|
||||
</div>
|
||||
{/* Card preview */}
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="relative z-[3] px-6 w-full">
|
||||
<div className="w-full h-[135px] rounded-xl overflow-hidden">
|
||||
<Skeleton className="w-full h-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Bottom info */}
|
||||
<div className="px-5 border-t border-[#EDEEEF] py-2.5 h-[80px] flex items-center justify-between">
|
||||
<div className="px-5 border-t rounded-b-xl border-[#EDEEEF] w-full py-2.5 h-[80px] bg-white flex items-center justify-between">
|
||||
<div>
|
||||
<Skeleton className="h-4 w-24 mb-2" />
|
||||
<div className="flex items-center gap-1">
|
||||
|
|
@ -32,15 +29,20 @@ const ThemeCardSkeleton = () => (
|
|||
|
||||
const Loading = () => {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Tabs skeleton */}
|
||||
<div className="space-y-6 px-6 font-syne">
|
||||
<div className="py-[28px] flex justify-between">
|
||||
<Skeleton className="h-[34px] w-[140px] rounded-lg" />
|
||||
<Skeleton className="h-[42px] w-[140px] rounded-[48px]" />
|
||||
</div>
|
||||
|
||||
<div className="p-1 rounded-[40px] bg-[#F7F6F9] w-fit border border-[#F4F4F4] flex items-center justify-center">
|
||||
<Skeleton className="h-8 w-20 rounded-[70px]" />
|
||||
<div className="mx-1 w-[2px] h-[17px] bg-[#EDECEC]" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="mx-1" width="2" height="17" viewBox="0 0 2 17" fill="none">
|
||||
<path d="M1 0V16.5" stroke="#EDECEC" strokeWidth="2" />
|
||||
</svg>
|
||||
<Skeleton className="h-8 w-20 rounded-[70px]" />
|
||||
</div>
|
||||
|
||||
{/* Theme cards grid */}
|
||||
<div className="flex flex-wrap gap-6">
|
||||
{Array.from({ length: 4 }).map((_, idx) => (
|
||||
<ThemeCardSkeleton key={idx} />
|
||||
|
|
@ -51,4 +53,3 @@ const Loading = () => {
|
|||
}
|
||||
|
||||
export default Loading
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue