Add loading indicator to project card

src/components/Projects/ProjectCard.tsx

@@ -39,11 +39,18 @@ export function ProjectCard(props: ProjectCardProps) {
         />
         <Badge variant={'grey'} text={frontmatter.nature} />
       </span>
-      <span className="my-3 flex flex-col min-h-[100px]">
+      <span className="my-3 flex min-h-[100px] flex-col">
         <span className="mb-1 font-medium">{frontmatter.title}</span>
         <span className="text-sm text-gray-500">{frontmatter.description}</span>
       </span>
-      <span className="flex items-center justify-between gap-2 text-xs text-gray-400 min-h-[22px]">
+      <span className="flex min-h-[22px] items-center justify-between gap-2 text-xs text-gray-400">
+        {isLoadingStatus ? (
+          <>
+            <span className="h-5 w-24 animate-pulse rounded bg-gray-200" />{' '}
+            <span className="h-5 w-20 animate-pulse rounded bg-gray-200" />{' '}
+          </>
+        ) : (
+          <>
             <span className="flex items-center gap-1.5">
               <Users className="size-3.5" />
               {userCount > 0 ? (
@@ -54,10 +61,9 @@ export function ProjectCard(props: ProjectCardProps) {
             </span>
 
             {status !== 'none' && (
-          <>
               <span
                 className={cn(
-                'flex items-center gap-1.5 capitalize border rounded-full px-2 py-0.5 border-current',
+                  'flex items-center gap-1.5 rounded-full border border-current px-2 py-0.5 capitalize',
                   status === 'completed' && 'text-green-500',
                   status === 'started' && 'text-yellow-500',
                 )}
@@ -68,9 +74,9 @@ export function ProjectCard(props: ProjectCardProps) {
                     'bg-yellow-500': status === 'started',
                   })}
                 />
-
                 {status}
               </span>
+            )}
           </>
         )}
       </span>