monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix: thinking animation opacity and design

Browse Source
This commit is contained in:
David Hill
2026-01-15 20:35:51 +00:00
parent 4d3e983edb
commit 0f7b17b1b4
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/src/pages/layout.tsx
View File

@@ -897,7 +897,7 @@ export default function Layout(props: ParentProps) {
> >
<Switch> <Switch>
<Match when={isWorking()}> <Match when={isWorking()}>
<Spinner class="size-[15px]" /> <Spinner class="size-[15px] opacity-50" />
</Match> </Match>
<Match when={hasPermissions()}> <Match when={hasPermissions()}>
<div class="size-1.5 rounded-full bg-surface-warning-strong" /> <div class="size-1.5 rounded-full bg-surface-warning-strong" />

11
packages/ui/src/components/spinner.tsx
View File

@@ -1,6 +1,7 @@
import { ComponentProps, For } from "solid-js" 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) => ({ const squares = Array.from({ length: 16 }, (_, i) => ({
id: i, id: i,
x: (i % 4) * 4, x: (i % 4) * 4,
@@ -8,6 +9,7 @@ const squares = Array.from({ length: 16 }, (_, i) => ({
delay: Math.random() * 1.5, delay: Math.random() * 1.5,
duration: 1 + Math.random() * 1, duration: 1 + Math.random() * 1,
outer: outerIndices.has(i), outer: outerIndices.has(i),
corner: cornerIndices.has(i),
})) }))
export function Spinner(props: { export function Spinner(props: {
@@ -35,8 +37,11 @@ export function Spinner(props: {
height="3" height="3"
rx="1" rx="1"
style={{ style={{
animation: `${square.outer ? "pulse-opacity-dim" : "pulse-opacity"} ${square.duration}s ease-in-out infinite`, opacity: square.corner ? 0 : undefined,
"animation-delay": `${square.delay}s`, 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`,
}} }}
/> />
)} )}