From ff23cb1293bdcd9fbf4997ac24cbc3cf274fb474 Mon Sep 17 00:00:00 2001
From: Valerii Sidorenko <balepas@nebius.com>
Date: Fri, 23 May 2025 20:29:28 +0200
Subject: [PATCH] GrafanaUI: Fix Combobox ignoring loading prop (#105584)

fix(Combobox): show loading state when loading prop is true

Closes #105294
---
 .../grafana-ui/src/components/Combobox/Combobox.tsx  | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.tsx
index be8cfad5398..6f9fd93db93 100644
--- a/packages/grafana-ui/src/components/Combobox/Combobox.tsx
+++ b/packages/grafana-ui/src/components/Combobox/Combobox.tsx
@@ -11,6 +11,7 @@ import { Input, Props as InputProps } from '../Input/Input';
 import { Portal } from '../Portal/Portal';
 
 import { ComboboxList } from './ComboboxList';
+import { SuffixIcon } from './SuffixIcon';
 import { itemToString } from './filter';
 import { getComboboxStyles, MENU_OPTION_HEIGHT, MENU_OPTION_HEIGHT_DESCRIPTION } from './getComboboxStyles';
 import { ComboboxOption } from './types';
@@ -129,7 +130,6 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
     autoFocus,
     onBlur,
     disabled,
-    loading,
     invalid,
   } = props;
 
@@ -330,12 +330,7 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
   const InputComponent = isAutoSize ? AutoSizeInput : Input;
   const placeholder = (isOpen ? itemToString(selectedItem) : null) || placeholderProp;
 
-  const suffixIcon = asyncLoading
-    ? 'spinner'
-    : // If it's loading, show loading icon. Otherwise, icon indicating menu state
-      isOpen
-      ? 'search'
-      : 'angle-down';
+  const loading = props.loading || asyncLoading;
 
   const inputSuffix = (
     <>
@@ -357,7 +352,7 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
         />
       )}
 
-      <Icon name={suffixIcon} />
+      <SuffixIcon isLoading={loading || false} isOpen={isOpen} />
     </>
   );
 
@@ -369,7 +364,6 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
         autoFocus={autoFocus}
         onBlur={onBlur}
         disabled={disabled}
-        loading={loading}
         invalid={invalid}
         className={styles.input}
         suffix={inputSuffix}