perf(ui): make DotsCircleSpinner a pure CSS animation (#3071)

Author: charlesvien

packages/ui/src/primitives/DotsCircleSpinner.tsx

@@ -1,60 +1,37 @@
-import { useSyncExternalStore } from "react";
-
 const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
-const INTERVAL = 80;
-
-let globalFrameIndex = 0;
-let subscriberCount = 0;
-let globalTimer: ReturnType<typeof setInterval> | null = null;
-const listeners = new Set<() => void>();
-
-function subscribe(callback: () => void) {
-  listeners.add(callback);
-  subscriberCount++;
-  if (subscriberCount === 1) {
-    globalTimer = setInterval(() => {
-      globalFrameIndex = (globalFrameIndex + 1) % FRAMES.length;
-      for (const listener of listeners) {
-        listener();
-      }
-    }, INTERVAL);
-  }
-  return () => {
-    listeners.delete(callback);
-    subscriberCount--;
-    if (subscriberCount === 0 && globalTimer) {
-      clearInterval(globalTimer);
-      globalTimer = null;
-    }
-  };
-}
-
-function getSnapshot() {
-  return globalFrameIndex;
-}
+const FRAME_INTERVAL_MS = 80;
 
 interface DotsCircleSpinnerProps {
   size?: number;
   className?: string;
 }
 
+/** Spins via the `ph-dots-frame` CSS animation (globals.css): all frames are
+ *  stacked in one grid cell and staggered delays reveal one at a time. Renders
+ *  once and never updates, so an always-visible spinner costs no JS. */
 export function DotsCircleSpinner({
   size = 12,
   className,
 }: DotsCircleSpinnerProps) {
-  const frameIndex = useSyncExternalStore(subscribe, getSnapshot);
-
   return (
     <span
-      className={`inline-flex items-center justify-center ${className}`}
+      className={`inline-grid place-items-center ${className}`}
       style={{
         width: size,
         height: size,
         fontSize: size,
         lineHeight: 1,
       }}
     >
-      {FRAMES[frameIndex]}
+      {FRAMES.map((frame, index) => (
+        <span
+          key={frame}
+          className="ph-dots-frame"
+          style={{ animationDelay: `${index * FRAME_INTERVAL_MS}ms` }}
+        >
+          {frame}
+        </span>
+      ))}
     </span>
   );
 }

packages/ui/src/styles/globals.css

@@ -361,6 +361,26 @@ body:has(.rt-DialogOverlay[data-state="open"]) [data-quill-portal] {
   animation: zen-float 3.5s ease-in-out infinite;
 }
 
+/* Braille-dots spinner: 10 stacked frames, each held for 10% of the cycle.
+   step-end holds each keyframe value so frames swap hard instead of fading.
+   Pure CSS so spinners cost no JS timers, React renders or DOM mutations
+   (DOM mutations would otherwise be serialized by session replay). */
+@keyframes ph-dots-frame {
+  0% {
+    opacity: 1;
+  }
+  10%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.ph-dots-frame {
+  grid-area: 1 / 1;
+  opacity: 0;
+  animation: ph-dots-frame 800ms step-end infinite;
+}
+
 /* Pulse animation for generating indicator */
 @keyframes ph-pulse {
   0%,