task-managment / src / app / dashboard / projects / _components / ProjectListSkeleton.tsx
ProjectListSkeleton.tsx
Raw
import { Skeleton } from '@/components/ui/skeleton'
import React from 'react'


const ProjectSkeleton=()=>{
    
    return(
        <div className="flex items-center gap-2 py-6 space-y-3 px-5">
        <Skeleton className="h-20 w-20 rounded-xl mb-2" />
        <div className='space-y-2'>
          <Skeleton className="h-2 w-32 rounded-md" />
          <Skeleton className="h-2 w-32 rounded-md" />
          <Skeleton className="h-2 w-32 rounded-md" />
        </div>
      </div>
    )
}

const ProjectListSkeleton = () => {
  return (
    <div className='grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-6 mt-5'>
        <ProjectSkeleton/>
        <ProjectSkeleton/>
        <ProjectSkeleton/>
        <ProjectSkeleton/>
        <ProjectSkeleton/>
        <ProjectSkeleton/>
    </div>
  )
}

export default ProjectListSkeleton