feat: show brief animation when starting server (#441)

Author: kantord

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

@@ -167,14 +167,27 @@ export function CardMcpServer({
   const isTransitioning =
     status === 'starting' || status === 'stopping' || status === 'restarting'
   const isStopped = status === 'stopped' || status === 'stopping'
+  const [hadRecentStatusChange, setHadRecentStatusChange] = useState(false)
+  const [prevStatus, setPrevStatus] =
+    useState<WorkloadsWorkload['status']>(status)
+
+  useEffect(() => {
+    // show a brief animation for status transitions that are immediate
+    if (prevStatus !== status && ['running'].includes(status ?? '')) {
+      setHadRecentStatusChange(true)
+      const timeout = setTimeout(() => setHadRecentStatusChange(false), 2500)
+      return () => clearTimeout(timeout)
+    }
+    setPrevStatus(status)
+  }, [status, prevStatus])
 
   return (
     <Card
       className={twMerge(
         'transition-all duration-300 ease-in-out',
         isNewServer ? 'ring-2' : undefined,
         isDeleting ? 'pointer-events-none opacity-50' : undefined,
-        isTransitioning && 'animate-diagonal-ring',
+        (isTransitioning || hadRecentStatusChange) && 'animate-diagonal-ring',
         isStopped && 'bg-card/65'
       )}
     >