diff --git a/src/renderer/components/extensions/ExtensionStoreView.tsx b/src/renderer/components/extensions/ExtensionStoreView.tsx index 1f9dcb2c..a7ff89d2 100644 --- a/src/renderer/components/extensions/ExtensionStoreView.tsx +++ b/src/renderer/components/extensions/ExtensionStoreView.tsx @@ -48,6 +48,8 @@ import { PluginsPanel } from './plugins/PluginsPanel'; import { SkillsPanel } from './skills/SkillsPanel'; import { ExtensionsSubTabTrigger } from './ExtensionsSubTabTrigger'; +import type { CliProviderStatus } from '@shared/types'; + const ProviderCapabilityCardSkeleton = ({ providerId, displayName, @@ -82,6 +84,19 @@ const ProviderCapabilityCardSkeleton = ({ ); +function isProviderCapabilityCardLoading( + provider: CliProviderStatus, + providerLoading: boolean +): boolean { + return ( + providerLoading || + (!provider.authenticated && + provider.statusMessage === 'Checking...' && + provider.models.length === 0 && + provider.backend == null) + ); +} + export const ExtensionStoreView = (): React.JSX.Element => { const tabId = useTabIdOptional(); const { @@ -317,7 +332,7 @@ export const ExtensionStoreView = (): React.JSX.Element => {
{visibleProviders.map((provider) => { const providerLoading = cliProviderStatusLoading[provider.providerId] === true; - if (providerLoading) { + if (isProviderCapabilityCardLoading(provider, providerLoading)) { return ( {
- + Plugins: {formatCliExtensionCapabilityStatus(pluginStatus)} diff --git a/test/renderer/components/extensions/ExtensionStoreView.test.ts b/test/renderer/components/extensions/ExtensionStoreView.test.ts index cf450adb..08ea0aa7 100644 --- a/test/renderer/components/extensions/ExtensionStoreView.test.ts +++ b/test/renderer/components/extensions/ExtensionStoreView.test.ts @@ -302,4 +302,28 @@ describe('ExtensionStoreView provider loading placeholders', () => { await Promise.resolve(); }); }); + + it('keeps provider placeholders visible when bootstrap data still says Checking...', async () => { + storeState.cliStatusLoading = false; + storeState.cliProviderStatusLoading = {}; + + const host = document.createElement('div'); + document.body.appendChild(host); + const root = createRoot(host); + + await act(async () => { + root.render(React.createElement(ExtensionStoreView)); + await Promise.resolve(); + await Promise.resolve(); + }); + + expect(host.textContent).toContain('Checking provider status...'); + expect(host.textContent).toContain('Loading...'); + expect(host.textContent).not.toContain('Plugins: unsupported'); + + await act(async () => { + root.unmount(); + await Promise.resolve(); + }); + }); });