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:
committed by
brooklyn!
parent
10dc619adc
commit
f265273347
@@ -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"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user