From f2652733474cb1fb1f05e15512c0305a600f1bd3 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Mon, 28 Sep 2026 11:35:24 -0500
Subject: [PATCH] fix(desktop): skills and clarify loading render the Loader
 primitive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DESIGN.md rules out literal "Loading…" text and bare spinners for section
loading.
---
 .../src/app/capabilities/catalog/skill-catalog.tsx       | 9 ++++++---
 apps/desktop/src/app/capabilities/skills/skills-tab.tsx  | 5 ++---
 .../desktop/src/components/assistant-ui/clarify-tool.tsx | 9 +++++----
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/apps/desktop/src/app/capabilities/catalog/skill-catalog.tsx b/apps/desktop/src/app/capabilities/catalog/skill-catalog.tsx
index 49c3f0e1e0..c18255f74a 100644
--- a/apps/desktop/src/app/capabilities/catalog/skill-catalog.tsx
+++ b/apps/desktop/src/app/capabilities/catalog/skill-catalog.tsx
@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query'
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { capabilityScoped } from '@/api/client'
+import { Loader } from '@/components/ui/loader'
 import { getOfficialSkills, type ProfileScope, profileScopeKey } from '@/hermes'
 import { useI18n } from '@/i18n'
 import { HUB_SOURCES_KEY, installHubSkill, notifyHubActionFailed, OFFICIAL_SKILLS_KEY } from '@/store/hub-actions'
@@ -279,9 +280,11 @@ function ScopedSkillCatalog({
             </CatalogAlert>
           )}
           {hasHubSkills && hubPending && !installedPending && !notice && (
-            <p className="px-3 py-2 text-xs text-(--ui-text-tertiary)" role="status">
-              {t.skills.loading}
-            </p>
+            <Loader
+              className="mx-auto my-2 size-6 text-(--ui-text-tertiary)"
+              label={t.skills.loading}
+              type="rose-curve"
+            />
           )}
         </>
       }
diff --git a/apps/desktop/src/app/capabilities/skills/skills-tab.tsx b/apps/desktop/src/app/capabilities/skills/skills-tab.tsx
index 4908558562..f83d567f90 100644
--- a/apps/desktop/src/app/capabilities/skills/skills-tab.tsx
+++ b/apps/desktop/src/app/capabilities/skills/skills-tab.tsx
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { ArchiveSkillConfirmDialog } from '@/app/learning/archive-skill-confirm-dialog'
 import { CodeEditor } from '@/components/chat/code-editor'
 import { Button } from '@/components/ui/button'
+import { Loader } from '@/components/ui/loader'
 import { Switch } from '@/components/ui/switch'
 import { editLearningNode, getLearningNode, type ProfileScope, profileScopeKey, setSkillEnabled } from '@/hermes'
 import { useI18n } from '@/i18n'
@@ -224,9 +225,7 @@ function ScopedSkillsTab({
       {installedError instanceof Error ? installedError.message : null}
     </CatalogAlert>
   ) : installedPending ? (
-    <p className="px-3 py-2 text-xs text-(--ui-text-tertiary)" role="status">
-      {t.skills.loading}
-    </p>
+    <Loader className="mx-auto my-2 size-6 text-(--ui-text-tertiary)" label={t.skills.loading} type="rose-curve" />
   ) : null
 
   return (
diff --git a/apps/desktop/src/components/assistant-ui/clarify-tool.tsx b/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
index e056a23239..44e22adac6 100644
--- a/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
+++ b/apps/desktop/src/components/assistant-ui/clarify-tool.tsx
@@ -20,6 +20,7 @@ import { WIDGET_SHELL_CLASS } from '@/components/chat/widget-shell'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
 import { Kbd } from '@/components/ui/kbd'
+import { Loader } from '@/components/ui/loader'
 import { Textarea } from '@/components/ui/textarea'
 import { Tip } from '@/components/ui/tooltip'
 import { useI18n } from '@/i18n'
@@ -810,7 +811,7 @@ function ClarifyToolSinglePending({
   if (loading) {
     return (
       <ClarifyShell aria-label={copy.loadingQuestion} className="my-1.5 grid min-h-12 place-items-center" role="status">
-        <Loader2 aria-hidden className="size-4 animate-spin text-(--ui-text-tertiary)" />
+        <Loader aria-hidden="true" className="size-6 text-(--ui-text-tertiary)" role="presentation" type="rose-curve" />
       </ClarifyShell>
     )
   }
@@ -934,7 +935,7 @@ function ClarifyToolSinglePending({
           </Button>
           <Button disabled={submitting || !ready || !pendingAnswer} size="xs" type="submit">
             {submitting ? (
-              <Loader2 className="size-3 animate-spin" />
+              <Loader2 className="animate-spin" />
             ) : (
               <>
                 {copy.continueLabel}
@@ -1286,7 +1287,7 @@ function ClarifyToolBatchPending({
   if (questions.length === 0) {
     return (
       <ClarifyShell aria-label={copy.loadingQuestion} className="my-1.5 grid min-h-12 place-items-center" role="status">
-        <Loader2 aria-hidden className="size-4 animate-spin text-(--ui-text-tertiary)" />
+        <Loader aria-hidden="true" className="size-6 text-(--ui-text-tertiary)" role="presentation" type="rose-curve" />
       </ClarifyShell>
     )
   }
@@ -1333,7 +1334,7 @@ function ClarifyToolBatchPending({
           </Button>
           <Button disabled={disabled || !allStaged} size="xs" type="submit">
             {submitting ? (
-              <Loader2 className="size-3 animate-spin" />
+              <Loader2 className="animate-spin" />
             ) : (
               <>
                 {copy.confirmAndContinueLabel}