From 0d94a281b61744a344a82ab8c4f494fb92c96643 Mon Sep 17 00:00:00 2001
From: usrnk1 <7547651+usrnk1@users.noreply.github.com>
Date: Wed, 21 Oct 2026 10:21:51 +0200
Subject: [PATCH] fix(ui): restore pixel-grid loading indicators

---
 packages/app/src/index.css                    | 25 -------------
 .../src/runtime/extension/titlebar-items.tsx  |  4 +--
 packages/ui/src/components/spinner.css        |  4 +++
 packages/ui/src/components/spinner.tsx        |  9 ++---
 .../feedback/activity-ring/activity-ring.css  | 27 --------------
 .../feedback/activity-ring/activity-ring.tsx  | 27 +++++---------
 packages/ui/src/feedback/loader/loader.css    | 27 --------------
 .../ui/src/feedback/loader/loader.stories.tsx |  4 +--
 packages/ui/src/feedback/loader/loader.tsx    | 35 +++++--------------
 9 files changed, 27 insertions(+), 135 deletions(-)

diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index f25d7523f8d..3271b8238c2 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -207,31 +207,6 @@
     );
   }
 
-  [data-slot="titlebar-update-loader"] {
-    display: block;
-    flex-shrink: 0;
-    margin: 1px;
-    width: 12px;
-    height: 12px;
-    border-radius: 9999px;
-    border: 2px solid color-mix(in srgb, var(--v2-icon-icon-accent) 30%, transparent);
-    border-top-color: var(--v2-icon-icon-accent);
-    animation: titlebar-update-loader-spin 0.67s linear infinite;
-    transform-origin: 50% 50%;
-  }
-
-  :root[data-motion="reduce"] {
-    [data-slot="titlebar-update-loader"] {
-      animation: none;
-    }
-  }
-
-  @keyframes titlebar-update-loader-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
   @keyframes home-projects-fade-top {
     from {
       visibility: hidden;
diff --git a/packages/app/src/runtime/extension/titlebar-items.tsx b/packages/app/src/runtime/extension/titlebar-items.tsx
index 60fbe3d86ed..5acce9a5cd8 100644
--- a/packages/app/src/runtime/extension/titlebar-items.tsx
+++ b/packages/app/src/runtime/extension/titlebar-items.tsx
@@ -1,6 +1,6 @@
 import { createMemo, For, Show } from "solid-js"
-import { syncSpinPhase } from "@opencode/ui/hooks"
 import { Icon } from "@opencode/ui/icon"
+import { Spinner } from "@opencode/ui/spinner"
 import { TitlebarItem } from "@opencode/gui-extensions/sdk"
 import { useExtensionHost } from "./host"
 
@@ -73,7 +73,7 @@ function TitlebarItemButton(props: { item: TitlebarItem; vertical?: boolean }) {
         >
           <Show
             when={!props.item.busy}
-            fallback={<span ref={syncSpinPhase} data-slot="titlebar-update-loader" aria-hidden="true" />}
+            fallback={<Spinner class="m-px size-3" aria-hidden="true" />}
           >
             <Show
               when={props.item.icon}
diff --git a/packages/ui/src/components/spinner.css b/packages/ui/src/components/spinner.css
index 2ca474dc3c3..d3135f7f73a 100644
--- a/packages/ui/src/components/spinner.css
+++ b/packages/ui/src/components/spinner.css
@@ -4,3 +4,7 @@
   width: 18px;
   aspect-ratio: 1;
 }
+
+:root[data-motion="reduce"] [data-slot="spinner-grid"] rect {
+  animation: none !important;
+}
diff --git a/packages/ui/src/components/spinner.tsx b/packages/ui/src/components/spinner.tsx
index 507f3671c2c..e61b347b3b9 100644
--- a/packages/ui/src/components/spinner.tsx
+++ b/packages/ui/src/components/spinner.tsx
@@ -15,17 +15,14 @@ const squares = Array.from({ length: 16 }, (_, i) => ({
   corner: cornerIndices.has(i),
 }))
 
-export function Spinner(props: {
-  class?: string
-  classList?: ComponentProps<"div">["classList"]
-  style?: ComponentProps<"div">["style"]
-}) {
+export function Spinner(props: ComponentProps<"svg"> & { "data-component"?: string }) {
   return (
     <svg
       {...props}
       ref={syncSpinPhase}
       viewBox="0 0 15 15"
-      data-component="spinner"
+      data-component={props["data-component"] ?? "spinner"}
+      data-slot="spinner-grid"
       classList={{
         ...props.classList,
         [props.class ?? ""]: !!props.class,
diff --git a/packages/ui/src/feedback/activity-ring/activity-ring.css b/packages/ui/src/feedback/activity-ring/activity-ring.css
index 1fc5d3564ce..d90315edd99 100644
--- a/packages/ui/src/feedback/activity-ring/activity-ring.css
+++ b/packages/ui/src/feedback/activity-ring/activity-ring.css
@@ -2,31 +2,4 @@
   display: block;
   flex-shrink: 0;
   color: var(--v2-icon-icon-muted);
-  /* The tail fades in to a solid head; the head's round cap still gets full colour just past the arc. */
-  mask-image: conic-gradient(from 90deg, transparent 0turn, black 0.72turn, black 0.78turn, transparent 0.9turn);
-  animation: activity-ring-spin 800ms linear infinite;
-}
-
-[data-component="activity-ring"] circle {
-  stroke: currentColor;
-  stroke-width: 1.8;
-  stroke-linecap: round;
-}
-
-@keyframes activity-ring-spin {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-@media (prefers-contrast: more) {
-  [data-component="activity-ring"] {
-    mask-image: none;
-  }
-}
-
-:root[data-motion="reduce"] {
-  [data-component="activity-ring"] {
-    animation: none;
-  }
 }
diff --git a/packages/ui/src/feedback/activity-ring/activity-ring.tsx b/packages/ui/src/feedback/activity-ring/activity-ring.tsx
index 266988fda6b..621bb5cb6ed 100644
--- a/packages/ui/src/feedback/activity-ring/activity-ring.tsx
+++ b/packages/ui/src/feedback/activity-ring/activity-ring.tsx
@@ -1,26 +1,15 @@
-import { splitProps, type ComponentProps } from "solid-js"
-import { syncSpinPhase } from "../../hooks/spin-phase"
+import { type ComponentProps } from "solid-js"
+import { Spinner } from "../../components/spinner"
 import "./activity-ring.css"
 
-// An open arc in constant rotation, matching the iOS drawer's busy ring.
 export function ActivityRing(props: ComponentProps<"svg">) {
-  const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
-
   return (
-    <svg
-      {...rest}
-      ref={syncSpinPhase}
-      class={local.class}
-      classList={local.classList}
-      width={local.width ?? 14}
-      height={local.height ?? 14}
-      viewBox="0 0 14 14"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
+    <Spinner
+      {...props}
+      width={props.width ?? 14}
+      height={props.height ?? 14}
       data-component="activity-ring"
-      aria-hidden={rest["aria-hidden"] ?? "true"}
-    >
-      <circle cx="7" cy="7" r="6.1" pathLength="100" stroke-dasharray="72 28" />
-    </svg>
+      aria-hidden={props["aria-hidden"] ?? "true"}
+    />
   )
 }
diff --git a/packages/ui/src/feedback/loader/loader.css b/packages/ui/src/feedback/loader/loader.css
index 2268ff5700d..7b3c3d90acb 100644
--- a/packages/ui/src/feedback/loader/loader.css
+++ b/packages/ui/src/feedback/loader/loader.css
@@ -1,32 +1,5 @@
 [data-component="loader-v2"] {
-  --_duration: 900ms;
   display: block;
   flex-shrink: 0;
   color: var(--v2-icon-icon-muted, #808080);
-  animation: loader-v2-spin var(--_duration) linear infinite;
-  transform-origin: center;
-}
-
-[data-component="loader-v2"] [data-slot="loader-v2-background"] {
-  stroke: currentColor;
-  opacity: 0.2;
-}
-
-[data-component="loader-v2"] [data-slot="loader-v2-progress"] {
-  stroke: currentColor;
-  stroke-linecap: round;
-  transform: rotate(-90deg);
-  transform-origin: center;
-}
-
-@keyframes loader-v2-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-:root[data-motion="reduce"] {
-  [data-component="loader-v2"] {
-    animation: none;
-  }
 }
diff --git a/packages/ui/src/feedback/loader/loader.stories.tsx b/packages/ui/src/feedback/loader/loader.stories.tsx
index e5baaa296e6..abcffb2f5df 100644
--- a/packages/ui/src/feedback/loader/loader.stories.tsx
+++ b/packages/ui/src/feedback/loader/loader.stories.tsx
@@ -1,13 +1,13 @@
 import { Loader } from "./loader"
 
 const docs = `### Overview
-Circular v2 loader for compact loading states.
+Pixel-grid loader for compact loading states.
 
 ### API
 - Accepts standard SVG props.
 
 ### Behavior
-- The foreground ring covers 33% of the circumference and rotates continuously.
+- Grid pixels pulse in opacity using the shared spinner animation.
 
 ### Accessibility
 - Sets \`aria-hidden="true"\` by default.
diff --git a/packages/ui/src/feedback/loader/loader.tsx b/packages/ui/src/feedback/loader/loader.tsx
index c1be19eb47b..aca70ad9e16 100644
--- a/packages/ui/src/feedback/loader/loader.tsx
+++ b/packages/ui/src/feedback/loader/loader.tsx
@@ -1,34 +1,15 @@
-import { splitProps, type ComponentProps } from "solid-js"
-import { syncSpinPhase } from "../../hooks/spin-phase"
+import { type ComponentProps } from "solid-js"
+import { Spinner } from "../../components/spinner"
 import "./loader.css"
 
 export function Loader(props: ComponentProps<"svg">) {
-  const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
-
   return (
-    <svg
-      {...rest}
-      ref={syncSpinPhase}
-      class={local.class}
-      classList={local.classList}
-      width={local.width ?? 16}
-      height={local.height ?? 16}
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
+    <Spinner
+      {...props}
+      width={props.width ?? 16}
+      height={props.height ?? 16}
       data-component="loader-v2"
-      aria-hidden={rest["aria-hidden"] ?? "true"}
-    >
-      <circle cx="8" cy="8" r="6" data-slot="loader-v2-background" stroke-width="2" />
-      <circle
-        cx="8"
-        cy="8"
-        r="6"
-        data-slot="loader-v2-progress"
-        pathLength="100"
-        stroke-width="2"
-        stroke-dasharray="33 67"
-      />
-    </svg>
+      aria-hidden={props["aria-hidden"] ?? "true"}
+    />
   )
 }