GrafanaUI: Fix Combobox ignoring loading prop (#105584)

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

Closes #105294

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
+  const loading = props.loading || asyncLoading;
-    ? 'spinner'
-    : // If it's loading, show loading icon. Otherwise, icon indicating menu state
-      isOpen
-      ? 'search'
-      : 'angle-down';
 
   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}