feat: module card skeleton

src/app/(dashboard)/app/_components/module-card.tsx

@@ -1,5 +1,6 @@
 import { convertHexToRGBA } from '@/lib/colors';
 import { Icon, type IconNames } from '@/primitives/icon';
+import { Skeleton } from '@/primitives/skeleton';
 import Link from 'next/link';
 import colors, { zinc } from 'tailwindcss/colors';
 
@@ -41,3 +42,13 @@ export function ModuleCard({
     </li>
   );
 }
+
+ModuleCard.Skeleton = function ModuleCardSkeleton() {
+  return (
+    <div className="flex h-[138px] w-[250px] flex-col gap-2 rounded-xl border border-gray-element bg-gray-subtle p-6">
+      <Skeleton className="size-5" />
+      <Skeleton className="mt-2 h-6 w-[200px]" />
+      <Skeleton className="mt-1 h-4 w-[50px]" />
+    </div>
+  );
+};

src/app/(dashboard)/app/_components/recent-modules.tsx

@@ -35,6 +35,7 @@ export function RecentModules() {
               icon="Airplay"
               name="Information Security"
             />
+            <ModuleCard.Skeleton />
           </ul>
           <ScrollBar orientation="horizontal" />
         </ScrollArea>

src/primitives/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from '@/lib/utils';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-gray-element', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };