Add loading indicator to project card

src/components/Projects/ProjectCard.tsx

@@ -39,38 +39,44 @@ 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">
-        <span className="flex items-center gap-1.5">
+        {isLoadingStatus ? (
-          <Users className="size-3.5" />
+          <>
-          {userCount > 0 ? (
+            <span className="h-5 w-24 animate-pulse rounded bg-gray-200" />{' '}
-            <>{formatCommaNumber(userCount)} Started</>
+            <span className="h-5 w-20 animate-pulse rounded bg-gray-200" />{' '}
-          ) : (
+          </>
-            <>Be the first to solve!</>
+        ) : (
-          )}
-        </span>
-
-        {status !== 'none' && (
           <>
-            <span
+            <span className="flex items-center gap-1.5">
-              className={cn(
+              <Users className="size-3.5" />
-                'flex items-center gap-1.5 capitalize border rounded-full px-2 py-0.5 border-current',
+              {userCount > 0 ? (
-                status === 'completed' && 'text-green-500',
+                <>{formatCommaNumber(userCount)} Started</>
-                status === 'started' && 'text-yellow-500',
+              ) : (
+                <>Be the first to solve!</>
               )}
-            >
-              <span
-                className={cn('inline-block h-2 w-2 rounded-full', {
-                  'bg-green-500': status === 'completed',
-                  'bg-yellow-500': status === 'started',
-                })}
-              />
-
-              {status}
             </span>
+
+            {status !== 'none' && (
+              <span
+                className={cn(
+                  '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',
+                )}
+              >
+                <span
+                  className={cn('inline-block h-2 w-2 rounded-full', {
+                    'bg-green-500': status === 'completed',
+                    'bg-yellow-500': status === 'started',
+                  })}
+                />
+                {status}
+              </span>
+            )}
           </>
         )}
       </span>