feat(app): new spinner animation for working state #10435

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

alexyaroshuk wants to merge 5 commits into anomalyco:dev from alexyaroshuk:oc-spinner-pr

packages/app/src/components/prompt-input.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -34,6 +34,7 @@ import { useComments } from "@/context/comments" @@
     import { FileIcon } from "@opencode-ai/ui/file-icon"
     import { Button } from "@opencode-ai/ui/button"
     import { Icon } from "@opencode-ai/ui/icon"
+    import { OCSpinner } from "@opencode-ai/ui/oc-spinner"
     import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
     import type { IconName } from "@opencode-ai/ui/icons/provider"
     import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
@@ Expand Down Expand Up @@
       return (
         <div class="relative size-full _max-h-[320px] flex flex-col gap-3">
+          <Show when={working()}>
+            <div class="flex items-center gap-3 p-0">
+              <OCSpinner class="w-8 h-8 text-text-strong" style={{ "margin-left": "-2px" }} />
+              <div class="text-text-weak">{language.t("ui.sessionTurn.status.working")}...</div>
+            </div>
+          </Show>
           <Show when={store.popover}>
             <div
               ref={(el) => {
@@ Expand Down @@

packages/ui/src/components/oc-spinner.css

-Original file line number
+Diff line change
@@ -0,0 +1,6 @@
+    [data-component="oc-spinner"] {
+      color: var(--text-base);
+      flex-shrink: 0;
+      width: 20px;
+      aspect-ratio: 1;
+    }

packages/ui/src/components/oc-spinner.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,66 @@
+    import { ComponentProps } from "solid-js"
+    import "./oc-spinner.css"
+    export function OCSpinner(props: Readonly<{
+      class?: string
+      classList?: ComponentProps<"svg">["classList"]
+      style?: ComponentProps<"svg">["style"]
+    }>) {
+      return (
+        <svg
+          {...props}
+          // TODO: If glow effect is reintroduced, change viewBox back to "-3 -6 22 32" to accommodate the glow padding
+          viewBox="-2 0 20 20"
+          data-component="oc-spinner"
+          classList={{
+            ...props.classList,
+            [props.class ?? ""]: !!props.class,
+          }}
+          fill="currentColor"
+          style={props.style}
+        >
+          {/* Layer 1: Static perimeter base */}
+          <path
+            d="M 0 0 L 16 0 L 16 20 L 0 20 Z M 4 4 L 4 16 L 12 16 L 12 4 Z"
+            fill-rule="evenodd"
+            opacity="0.65"
+          />
+          {/* Layer 1b: Inner background (perimeterBG) - only bottom area */}
+          <rect
+            x="4"
+            y="8"
+            width="8"
+            height="8"
+            fill="currentColor"
+            opacity="0.15"
+          />
+          {/* Layer 2: Animated trail with motion blur on both ends (12 segments) */}
+          <path d="M 2 2 L 14 2 L 14 18 L 2 18 Z" stroke="currentColor" stroke-width="4" stroke-linecap="square" fill="none" opacity="0.25" style={{ animation: `oc-trail-move 1s linear infinite`, "stroke-dasharray": "4 52", "animation-delay": "0.16s" }} />
+          <path d="M 2 2 L 14 2 L 14 18 L 2 18 Z" stroke="currentColor" stroke-width="4" stroke-linecap="square" fill="none" opacity="0.4" style={{ animation: `oc-trail-move 1s linear infinite`, "stroke-dasharray": "4 52", "animation-delay": "0.128s" }} />
+          <path d="M 2 2 L 14 2 L 14 18 L 2 18 Z" stroke="currentColor" stroke-width="4" stroke-linecap="square" fill="none" opacity="0.55" style={{ animation: `oc-trail-move 1s linear infinite`, "stroke-dasharray": "4 52", "animation-delay": "0.096s" }} />
+          <path d="M 2 2 L 14 2 L 14 18 L 2 18 Z" stroke="currentColor" stroke-width="4" stroke-linecap="square" fill="none" opacity="0.7" style={{ animation: `oc-trail-move 1s linear infinite`, "stroke-dasharray": "4 52", "animation-delay": "0.064s" }} />
+          <path d="M 2 2 L 14 2 L 14 18 L 2 18 Z" stroke="currentColor" stroke-width="4" stroke-linecap="square" fill="none" opacity="0.85" style={{ animation: `oc-trail-move 1s linear infinite`, "stroke-dasharray": "4 52", "animation-delay": "0.032s" }} />
+          <path d="M 2 2 L 14 2 L 14 18 L 2 18 Z" stroke="currentColor" stroke-width="4" stroke-linecap="square" fill="none" opacity="1" style={{ animation: `oc-trail-move 1s linear infinite`, "stroke-dasharray": "4 52", "animation-delay": "0s" }} />
+          <path d="M 2 2 L 14 2 L 14 18 L 2 18 Z" stroke="currentColor" stroke-width="4" stroke-linecap="square" fill="none" opacity="0.85" style={{ animation: `oc-trail-move 1s linear infinite`, "stroke-dasharray": "4 52", "animation-delay": "-0.032s" }} />
+          <path d="M 2 2 L 14 2 L 14 18 L 2 18 Z" stroke="currentColor" stroke-width="4" stroke-linecap="square" fill="none" opacity="0.7" style={{ animation: `oc-trail-move 1s linear infinite`, "stroke-dasharray": "4 52", "animation-delay": "-0.064s" }} />
+          <path d="M 2 2 L 14 2 L 14 18 L 2 18 Z" stroke="currentColor" stroke-width="4" stroke-linecap="square" fill="none" opacity="0.55" style={{ animation: `oc-trail-move 1s linear infinite`, "stroke-dasharray": "4 52", "animation-delay": "-0.096s" }} />
+          <path d="M 2 2 L 14 2 L 14 18 L 2 18 Z" stroke="currentColor" stroke-width="4" stroke-linecap="square" fill="none" opacity="0.4" style={{ animation: `oc-trail-move 1s linear infinite`, "stroke-dasharray": "4 52", "animation-delay": "-0.128s" }} />
+          <path d="M 2 2 L 14 2 L 14 18 L 2 18 Z" stroke="currentColor" stroke-width="4" stroke-linecap="square" fill="none" opacity="0.25" style={{ animation: `oc-trail-move 1s linear infinite`, "stroke-dasharray": "4 52", "animation-delay": "-0.16s" }} />
+          <style>{`
+            @keyframes oc-trail-move {
+% {
+                stroke-dashoffset: 0;
+              }
+% {
+                stroke-dashoffset: -56;
+              }
+            }
+          `}</style>
+        </svg>
+      )
+    }

packages/ui/src/i18n/ar.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,7 @@ export const dict = { @@
       "ui.sessionTurn.status.thinkingWithTopic": "تفكير - {{topic}}",
       "ui.sessionTurn.status.gatheringThoughts": "جمع الأفكار",
       "ui.sessionTurn.status.consideringNextSteps": "النظر في الخطوات التالية",
+      "ui.sessionTurn.status.working": "جاري العمل",
       "ui.messagePart.diagnostic.error": "خطأ",
       "ui.messagePart.title.edit": "تحرير",
@@ Expand Down @@

packages/ui/src/i18n/br.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,7 @@ export const dict = { @@
       "ui.sessionTurn.status.thinkingWithTopic": "Pensando - {{topic}}",
       "ui.sessionTurn.status.gatheringThoughts": "Organizando pensamentos",
       "ui.sessionTurn.status.consideringNextSteps": "Considerando próximos passos",
+      "ui.sessionTurn.status.working": "Trabalhando",
       "ui.messagePart.diagnostic.error": "Erro",
       "ui.messagePart.title.edit": "Editar",
@@ Expand Down @@

packages/ui/src/i18n/da.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,7 @@ export const dict = { @@
       "ui.sessionTurn.status.thinkingWithTopic": "Tænker - {{topic}}",
       "ui.sessionTurn.status.gatheringThoughts": "Samler tanker",
       "ui.sessionTurn.status.consideringNextSteps": "Overvejer næste skridt",
+      "ui.sessionTurn.status.working": "Arbejder",
       "ui.messagePart.diagnostic.error": "Fejl",
       "ui.messagePart.title.edit": "Rediger",
@@ Expand Down @@

packages/ui/src/i18n/de.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -37,6 +37,7 @@ export const dict = { @@
       "ui.sessionTurn.status.thinkingWithTopic": "Denken - {{topic}}",
       "ui.sessionTurn.status.gatheringThoughts": "Gedanken sammeln",
       "ui.sessionTurn.status.consideringNextSteps": "Nächste Schritte erwägen",
+      "ui.sessionTurn.status.working": "Arbeiten",
       "ui.messagePart.diagnostic.error": "Fehler",
       "ui.messagePart.title.edit": "Bearbeiten",
@@ Expand Down @@

packages/ui/src/i18n/en.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -34,6 +34,7 @@ export const dict = { @@
       "ui.sessionTurn.status.thinkingWithTopic": "Thinking - {{topic}}",
       "ui.sessionTurn.status.gatheringThoughts": "Gathering thoughts",
       "ui.sessionTurn.status.consideringNextSteps": "Considering next steps",
+      "ui.sessionTurn.status.working": "Working",
       "ui.messagePart.diagnostic.error": "Error",
       "ui.messagePart.title.edit": "Edit",
@@ Expand Down @@

packages/ui/src/i18n/es.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,7 @@ export const dict = { @@
       "ui.sessionTurn.status.thinkingWithTopic": "Pensando - {{topic}}",
       "ui.sessionTurn.status.gatheringThoughts": "Recopilando pensamientos",
       "ui.sessionTurn.status.consideringNextSteps": "Considerando siguientes pasos",
+      "ui.sessionTurn.status.working": "Trabajando",
       "ui.messagePart.diagnostic.error": "Error",
       "ui.messagePart.title.edit": "Editar",
@@ Expand Down @@

packages/ui/src/i18n/fr.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,7 @@ export const dict = { @@
       "ui.sessionTurn.status.thinkingWithTopic": "Réflexion - {{topic}}",
       "ui.sessionTurn.status.gatheringThoughts": "Rassemblement des idées",
       "ui.sessionTurn.status.consideringNextSteps": "Examen des prochaines étapes",
+      "ui.sessionTurn.status.working": "En cours",
       "ui.messagePart.diagnostic.error": "Erreur",
       "ui.messagePart.title.edit": "Modifier",
@@ Expand Down @@

packages/ui/src/i18n/ja.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,7 @@ export const dict = { @@
       "ui.sessionTurn.status.thinkingWithTopic": "思考中 - {{topic}}",
       "ui.sessionTurn.status.gatheringThoughts": "考えをまとめています",
       "ui.sessionTurn.status.consideringNextSteps": "次のステップを検討中",
+      "ui.sessionTurn.status.working": "作業中",
       "ui.messagePart.diagnostic.error": "エラー",
       "ui.messagePart.title.edit": "編集",
@@ Expand Down @@

packages/ui/src/i18n/ko.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,7 @@ export const dict = { @@
       "ui.sessionTurn.status.thinkingWithTopic": "생각 중 - {{topic}}",
       "ui.sessionTurn.status.gatheringThoughts": "생각 정리 중",
       "ui.sessionTurn.status.consideringNextSteps": "다음 단계 고려 중",
+      "ui.sessionTurn.status.working": "작업 중",
       "ui.messagePart.diagnostic.error": "오류",
       "ui.messagePart.title.edit": "편집",
@@ Expand Down @@

packages/ui/src/i18n/no.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -36,6 +36,7 @@ export const dict: Record<Keys, string> = { @@
       "ui.sessionTurn.status.thinkingWithTopic": "Tenker - {{topic}}",
       "ui.sessionTurn.status.gatheringThoughts": "Samler tanker",
       "ui.sessionTurn.status.consideringNextSteps": "Vurderer neste trinn",
+      "ui.sessionTurn.status.working": "Arbeider",
       "ui.messagePart.diagnostic.error": "Feil",
       "ui.messagePart.title.edit": "Rediger",
@@ Expand Down @@

packages/ui/src/i18n/pl.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,7 @@ export const dict = { @@
       "ui.sessionTurn.status.thinkingWithTopic": "Myślenie - {{topic}}",
       "ui.sessionTurn.status.gatheringThoughts": "Zbieranie myśli",
       "ui.sessionTurn.status.consideringNextSteps": "Rozważanie kolejnych kroków",
+      "ui.sessionTurn.status.working": "Pracuję",
       "ui.messagePart.diagnostic.error": "Błąd",
       "ui.messagePart.title.edit": "Edycja",
@@ Expand Down @@

packages/ui/src/i18n/ru.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,7 @@ export const dict = { @@
       "ui.sessionTurn.status.thinkingWithTopic": "Размышление - {{topic}}",
       "ui.sessionTurn.status.gatheringThoughts": "Сбор мыслей",
       "ui.sessionTurn.status.consideringNextSteps": "Рассмотрение следующих шагов",
+      "ui.sessionTurn.status.working": "Работаю",
       "ui.messagePart.diagnostic.error": "Ошибка",
       "ui.messagePart.title.edit": "Редактировать",
@@ Expand Down @@

packages/ui/src/i18n/zh.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -37,6 +37,7 @@ export const dict = { @@
       "ui.sessionTurn.status.thinkingWithTopic": "思考：{{topic}}",
       "ui.sessionTurn.status.gatheringThoughts": "正在整理思路",
       "ui.sessionTurn.status.consideringNextSteps": "正在考虑下一步",
+      "ui.sessionTurn.status.working": "处理中",
       "ui.messagePart.diagnostic.error": "错误",
       "ui.messagePart.title.edit": "编辑",
@@ Expand Down @@

packages/ui/src/i18n/zht.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -37,6 +37,7 @@ export const dict = { @@
       "ui.sessionTurn.status.thinkingWithTopic": "思考 - {{topic}}",
       "ui.sessionTurn.status.gatheringThoughts": "正在整理思緒",
       "ui.sessionTurn.status.consideringNextSteps": "正在考慮下一步",
+      "ui.sessionTurn.status.working": "處理中",
       "ui.messagePart.diagnostic.error": "錯誤",
       "ui.messagePart.title.edit": "編輯",
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(app): new spinner animation for working state #10435

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

feat(app): new spinner animation for working state #10435

Are you sure you want to change the base?

Uh oh!

feat(app): new spinner animation for working state #10435

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!