chore(code): sync spinner animations (#1343)

## Problem

surely i have better things to do, but the spinners being out-of-sync was bothering me a bit 😛

<!-- Who is this for and what problem does it solve? -->

<!-- Closes #ISSUE_ID -->

## Changes

- [Screen Recording 2026-03-26 at 8.51.18 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/bf481fbe-f77f-40e8-9bae-fda979767391.mov" />](https://app.graphite.com/user-attachments/video/bf481fbe-f77f-40e8-9bae-fda979767391.mov)

    

    syncs the spinner animations
- fixes cloud run loader (spinner was overlapping the cloud icon)

<!-- What did you change and why? -->

<!-- If there are frontend changes, include screenshots. -->

## How did you test this?

manually

<!-- Describe what you tested -- manual steps, automated tests, or both. -->

<!-- If you're an agent, only list tests you actually ran. -->

Author: adboio

apps/code/src/renderer/components/DotsCircleSpinner.tsx

@@ -1,8 +1,38 @@
-import { useEffect, useState } from "react";
+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;
+}
+
 interface DotsCircleSpinnerProps {
   size?: number;
   className?: string;
@@ -12,15 +42,7 @@ export function DotsCircleSpinner({
   size = 12,
   className,
 }: DotsCircleSpinnerProps) {
-  const [frameIndex, setFrameIndex] = useState(0);
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setFrameIndex((prev) => (prev + 1) % FRAMES.length);
-    }, INTERVAL);
-
-    return () => clearInterval(timer);
-  }, []);
+  const frameIndex = useSyncExternalStore(subscribe, getSnapshot);
 
   return (
     <span

apps/code/src/renderer/features/sidebar/components/items/TaskItem.tsx

@@ -136,12 +136,8 @@ function CloudStatusIcon({
   if (taskRunStatus === "started" || taskRunStatus === "in_progress") {
     return (
       <Tooltip content="Cloud (running)" side="right">
-        <span className="relative flex items-center justify-center">
-          <CloudIcon size={ICON_SIZE} className="text-accent-11" />
-          <DotsCircleSpinner
-            size={8}
-            className="-right-0.5 -bottom-0.5 absolute text-accent-11"
-          />
+        <span className="flex items-center justify-center">
+          <CloudIcon size={ICON_SIZE} className="ph-pulse" />
         </span>
       </Tooltip>
     );