feat: add loading animation to mcp cards (#433)

Author: kantord

renderer/src/features/mcp-servers/components/card-mcp-server.tsx

@@ -164,18 +164,30 @@ export function CardMcpServer({
 
   // Check if the server is in deleting state
   const isDeleting = isDeletePending || status === 'deleting'
+  const isTransitioning =
+    status === 'starting' || status === 'stopping' || status === 'restarting'
+  const isStopped = status === 'stopped' || status === 'stopping'
 
   return (
     <Card
       className={twMerge(
-        'transition-[color,box-shadow,opacity]',
+        'transition-all duration-300 ease-in-out',
         isNewServer ? 'ring-2' : undefined,
-        isDeleting ? 'pointer-events-none opacity-50' : undefined
+        isDeleting ? 'pointer-events-none opacity-50' : undefined,
+        isTransitioning && 'animate-diagonal-ring',
+        isStopped && 'bg-card/65'
       )}
     >
       <CardHeader>
         <div className="flex items-center justify-between">
-          <CardTitle className="flex items-center text-xl">{name}</CardTitle>
+          <CardTitle
+            className={twMerge(
+              'flex items-center text-xl',
+              isStopped && 'text-primary/65'
+            )}
+          >
+            {name}
+          </CardTitle>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button

renderer/src/index.css

@@ -176,4 +176,53 @@
   .app-region-no-drag {
     app-region: no-drag;
   }
+
+  @keyframes diagonal-ring {
+    from {
+      background-position: -150% -150%;
+    }
+
+    to {
+      background-position: 150% 150%;
+    }
+  }
+
+  .animate-diagonal-ring {
+    position: relative;
+  }
+
+  .animate-diagonal-ring::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    padding: 1px;
+    /* ring thickness */
+    border-radius: inherit;
+    pointer-events: none;
+
+    /* using card foreground color with reduced opacity */
+    background: linear-gradient(
+      120deg,
+      transparent 0%,
+      transparent 40%,
+      color-mix(in oklch, var(--card-foreground) 25%, transparent) 50%,
+      transparent 60%,
+      transparent 100%
+    );
+    background-size: 300% 300%;
+    animation: diagonal-ring 5s linear infinite;
+
+    /* show only the ring */
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0) padding-box;
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .animate-diagonal-ring::before {
+      animation: none;
+    }
+  }
 }