fix(desktop): vertically center settings panel loader

The settings OverlayMain has a titlebar-height top pad (no bottom pad), so
the full-panel LoadingState centered in the band beneath it and read low.
Cancel the top pad on the loader so it centers in the whole card; the one
inline (mid-panel) memory loader switches to a plain min-height PageLoader
so it's unaffected.
This commit is contained in:
Brooklyn Nicholson 2026-07-20 13:49:27 -05:00
parent ac9a1014a6
commit fc8e96b200
2 changed files with 13 additions and 3 deletions

View file

@ -1,5 +1,6 @@
import { useCallback, useEffect, useState } from 'react'
import { PageLoader } from '@/components/page-loader'
import { Button } from '@/components/ui/button'
import { DisclosureCaret } from '@/components/ui/disclosure-caret'
import { getMemoryProviderConfig, saveMemoryProviderConfig } from '@/hermes'
@ -7,7 +8,7 @@ import { SlidersHorizontal } from '@/lib/icons'
import { notifyError } from '@/store/notifications'
import type { MemoryProviderConfig, MemoryProviderField } from '@/types/hermes'
import { ListRow, LoadingState, Pill } from '../primitives'
import { ListRow, Pill } from '../primitives'
import { FieldControl, FieldTitle } from './field-control'
import { ProviderConfigModal } from './provider-config-modal'
@ -95,7 +96,7 @@ export function ProviderConfigPanel({ provider }: { provider: string }) {
)
}
return <LoadingState label="Loading memory provider settings..." />
return <PageLoader className="min-h-24" label="Loading memory provider settings..." />
}
const inlineFields = config.fields.filter(field => field.inline)

View file

@ -143,8 +143,17 @@ export function ToggleRow({
)
}
// The settings panels render this as the sole child of the top-padded
// OverlayMain (pt = titlebar + 1rem, no bottom pad — see settings/index.tsx).
// Cancel that top pad so the loader centers in the whole card, not just the
// band beneath it. Inline loaders (mid-panel) should use <PageLoader> directly.
export function LoadingState({ label }: { label: string }) {
return <PageLoader label={label} />
return (
<PageLoader
className="-mt-[calc(var(--titlebar-height)+1rem)] h-[calc(100%+var(--titlebar-height)+1rem)]"
label={label}
/>
)
}
// Canonical implementation lives in components/ui; re-exported so the many