fix(ai): show loading/disabled state for model selects when options are empty

https://sonarly.com/issue/32938?type=bug The Smart Model and Fast Model Select dropdowns on `/settings/ai` render as empty fragments (`<></>`) when the options list is empty — either during initial page load before `aiModelsState` populates, or when the workspace's selected model doesn't match any enabled model option. Users see the section titles but no clickable controls, causing rage clicks. Fix: Added a loading state check to the Smart Model and Fast Model Select dropdowns in `SettingsAiModelsTab.tsx`. The `aiModelsState` atom starts as `[]` and is populated asynchronously via `getClientConfig()`. During this loading window, the `Select` component receives empty `options` and an undefined `pinnedOption`, causing it to render an empty fragment `<></>` — the dropdown controls become invisible while the surrounding labels remain visible. Users click where they expect a dropdown but nothing responds. The fix adds `const isLoading = aiModels.length === 0` and passes `disabled={isLoading}` to both Select components. When disabled, the Select renders a visible but non-interactive `SelectControl` (with the chevron icon and greyed-out styling), giving users clear visual feedback that the control exists but is loading. Once `aiModels` populates, the selects become interactive normally.
2026-04-30 11:35:36 +00:00
1 changed files with 4 additions and 0 deletions
@@ -87,6 +87,8 @@ export const SettingsAiModelsTab = () => {
      };
    });

+  const isLoading = aiModels.length === 0;
+
  const smartModelOptions = buildModelOptions();
  const fastModelOptions = buildModelOptions();

@@ -236,6 +238,7 @@ export const SettingsAiModelsTab = () => {
          >
            <Select
              dropdownId="smart-model-select"
+              disabled={isLoading}
              value={currentSmartModel}
              onChange={(value) => handleModelFieldChange('smartModel', value)}
              options={smartModelOptions}
@@ -251,6 +254,7 @@ export const SettingsAiModelsTab = () => {
          >
            <Select
              dropdownId="fast-model-select"
+              disabled={isLoading}
              value={currentFastModel}
              onChange={(value) => handleModelFieldChange('fastModel', value)}
              options={fastModelOptions}