Skip to content

fix: prevent Available Connectors section from flashing on load #69

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
graydawnc merged 1 commit into from
Apr 13, 2026
Merged

fix: prevent Available Connectors section from flashing on load #69

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 35 additions & 40 deletions packages/app/src/renderer/components/SettingsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -626,47 +626,42 @@ function ConnectorsTab({ claudeCount, codexCount, geminiCount }: { claudeCount:
})}
</Section>

{!registryLoading && !registryError && discoverConnectors.length > 0 && (
<Section title="Available Connectors">
{discoverConnectors.map(rc => (
<div
key={rc.name}
className="flex items-center gap-3 py-2.5"
>
<span
className="w-2 h-2 rounded-full flex-none opacity-50"
style={{ background: rc.color }}
/>
<div className="flex-1 min-w-0 leading-4">
<span className="text-xs text-warm-muted dark:text-dark-muted">{rc.label}</span>
<span className="text-[11px] text-warm-faint dark:text-dark-faint ml-2">{rc.description}</span>
{installErrors[rc.name] && installingPackage !== rc.name && (
<div className="text-[10px] text-red-400 mt-0.5">{installErrors[rc.name]}</div>
)}
</div>
<button
onClick={() => handleInstall(rc.name)}
disabled={installingPackage === rc.name}
className="text-[11px] font-medium text-accent dark:text-accent-dark hover:underline disabled:opacity-50 flex-none"
>
{installingPackage === rc.name ? 'Installing\u2026' : 'Install'}
</button>
<Section title="Available Connectors">
{registryLoading && (
<p className="text-[11px] text-warm-faint dark:text-dark-muted">Loading connector directory\u2026</p>
)}
{registryError && !registryLoading && (
<p className="text-[11px] text-warm-faint dark:text-dark-muted">Couldn't load connector directory</p>
)}
{!registryLoading && !registryError && discoverConnectors.length === 0 && (
<p className="text-[11px] text-warm-faint dark:text-dark-muted">All connectors installed</p>
)}
{!registryLoading && !registryError && discoverConnectors.map(rc => (
<div
key={rc.name}
className="flex items-center gap-3 py-2.5"
>
<span
className="w-2 h-2 rounded-full flex-none opacity-50"
style={{ background: rc.color }}
/>
<div className="flex-1 min-w-0 leading-4">
<span className="text-xs text-warm-muted dark:text-dark-muted">{rc.label}</span>
<span className="text-[11px] text-warm-faint dark:text-dark-faint ml-2">{rc.description}</span>
{installErrors[rc.name] && installingPackage !== rc.name && (
<div className="text-[10px] text-red-400 mt-0.5">{installErrors[rc.name]}</div>
)}
</div>
))}
</Section>
)}

{registryLoading && (
<div className="text-[11px] text-warm-faint dark:text-dark-faint px-2">
Loading connector directory\u2026
</div>
)}

{registryError && !registryLoading && (
<div className="text-[11px] text-warm-faint dark:text-dark-faint px-2">
Couldn't load connector directory
</div>
)}
<button
onClick={() => handleInstall(rc.name)}
disabled={installingPackage === rc.name}
className="text-[11px] font-medium text-accent dark:text-accent-dark hover:underline disabled:opacity-50 flex-none"
>
{installingPackage === rc.name ? 'Installing\u2026' : 'Install'}
</button>
</div>
))}
</Section>

{syncError && (
<div className="px-3 py-2 bg-red-500/10 border border-red-500/20 rounded-[6px]">
Expand Down