fix: thinking animation opacity and design

2 files changed, 9 insertions, 4 deletions

diff --git a/packages/app/src/pages/layout.tsx b/packages/app/src/pages/layout.tsx
index 135c73194..72224f349 100644
--- a/packages/app/src/pages/layout.tsx
+++ b/packages/app/src/pages/layout.tsx
@@ -897,7 +897,7 @@ export default function Layout(props: ParentProps) {
               >
                 <Switch>
                   <Match when={isWorking()}>
-                    <Spinner class="size-[15px]" />
+                    <Spinner class="size-[15px] opacity-50" />
                   </Match>
                   <Match when={hasPermissions()}>
                     <div class="size-1.5 rounded-full bg-surface-warning-strong" />
diff --git a/packages/ui/src/components/spinner.tsx b/packages/ui/src/components/spinner.tsx
index b8cc933c8..cc4149d17 100644
--- a/packages/ui/src/components/spinner.tsx
+++ b/packages/ui/src/components/spinner.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps, For } from "solid-js"
 
-const outerIndices = new Set([0, 1, 2, 3, 4, 7, 8, 11, 12, 13, 14, 15])
+const outerIndices = new Set([1, 2, 4, 7, 8, 11, 13, 14])
+const cornerIndices = new Set([0, 3, 12, 15])
 const squares = Array.from({ length: 16 }, (_, i) => ({
   id: i,
   x: (i % 4) * 4,
@@ -8,6 +9,7 @@ const squares = Array.from({ length: 16 }, (_, i) => ({
   delay: Math.random() * 1.5,
   duration: 1 + Math.random() * 1,
   outer: outerIndices.has(i),
+  corner: cornerIndices.has(i),
 }))
 
 export function Spinner(props: {
@@ -35,8 +37,11 @@ export function Spinner(props: {
             height="3"
             rx="1"
             style={{
-              animation: `${square.outer ? "pulse-opacity-dim" : "pulse-opacity"} ${square.duration}s ease-in-out infinite`,
-              "animation-delay": `${square.delay}s`,
+              opacity: square.corner ? 0 : undefined,
+              animation: square.corner
+                ? undefined
+                : `${square.outer ? "pulse-opacity-dim" : "pulse-opacity"} ${square.duration}s ease-in-out infinite`,
+              "animation-delay": square.corner ? undefined : `${square.delay}s`,
             }}
           />
         )}