feat(ui): implement shimmer skeleton loaders for complex data widgets

src/app/globals.css

@@ -337,3 +337,13 @@ body {
     transform: none !important;
   }
 }
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.animate-shimmer {
+  animation: shimmer 1.5s infinite;
+}

src/components/CodingActivityInsightsCard.tsx

@@ -12,6 +12,7 @@ import {
   YAxis,
   type TooltipProps,
 } from "recharts";
+import { Skeleton } from "@/components/Skeleton";
 import { useAccount } from "@/components/AccountContext";
 import {
   formatHourRange,
@@ -272,14 +273,10 @@ export default function CodingActivityInsightsCard() {
           className="space-y-4"
         >
           <span className="sr-only">Loading coding activity insights</span>
-          <div className="h-[260px] rounded-lg bg-[var(--card-muted)] animate-pulse" />
+          <Skeleton className="h-[260px] w-full rounded-lg" />
           <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
             {[1, 2, 3].map((item) => (
-              <div
-                key={item}
-                aria-hidden="true"
-                className="h-16 rounded-lg bg-[var(--card-muted)] animate-pulse"
-              />
+              <Skeleton key={item} className="h-16 w-full rounded-lg" />
             ))}
           </div>
         </div>

src/components/ProjectMetrics.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import { Skeleton } from "@/components/Skeleton";
 
 interface ProjectData {
   metrics: {
@@ -120,17 +121,25 @@ export default function ProjectMetrics() {
   if (loading) {
     return (
       <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
-        <h2 className="mb-4 text-lg font-semibold text-[var(--card-foreground)]">
-          Project Tracking
-        </h2>
-        <div className="grid grid-cols-4 gap-4">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
+            Project Tracking
+          </h2>
+          <Skeleton className="h-4 w-16" />
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
           {[1, 2, 3, 4].map((i) => (
-            <div
-              key={i}
-              className="bg-[var(--card-muted)] rounded-lg p-4 h-24 animate-pulse"
-            />
+            <Skeleton key={i} className="h-[88px] w-full rounded-lg" />
           ))}
         </div>
+        <div>
+          <Skeleton className="h-4 w-24 mb-3" />
+          <div className="space-y-2">
+            {[1, 2, 3].map((i) => (
+              <Skeleton key={i} className="h-[60px] w-full rounded-lg" />
+            ))}
+          </div>
+        </div>
       </div>
     );
   }

src/components/Skeleton.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export function Skeleton({
+  className = "",
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={`relative overflow-hidden bg-[var(--card-muted)] rounded-md ${className}`}
+      {...props}
+    >
+      <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-black/5 dark:via-white/10 to-transparent" />
+    </div>
+  );
+}