fix(desktop): skills and clarify loading render the Loader primitive

DESIGN.md rules out literal "Loading…" text and bare spinners for section
loading.
This commit is contained in:
Brooklyn Nicholson
2026-09-28 11:35:24 -05:00
committed by brooklyn!
parent 10dc619adc
commit f265273347
3 changed files with 13 additions and 10 deletions

View File

@@ -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"
/>
)}
</>
}

View File

@@ -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 (

View File

@@ -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}