Select: Replace dropdown indicator with loading icon (#105739)

* Replace the dropdown icon with loading to reduce jankiness

* Rmove theme usage

* Remove unused  import

* Fix margin issue

* Update snapshot

packages/grafana-ui/src/components/Input/Input.tsx

@@ -275,7 +275,6 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false, width }:
         label: 'input-suffix',
         paddingLeft: theme.spacing(1),
         paddingRight: theme.spacing(1),
-        marginBottom: '-2px',
         borderLeft: 'none',
         borderTopLeftRadius: 0,
         borderBottomLeftRadius: 0,

packages/grafana-ui/src/components/Select/DropdownIndicator.tsx

@@ -1,10 +1,16 @@
 import { DropdownIndicatorProps } from 'react-select';
 
 import { Icon } from '../Icon/Icon';
+import { Spinner } from '../Spinner/Spinner';
 
 export function DropdownIndicator({ selectProps }: DropdownIndicatorProps) {
   const isOpen = selectProps.menuIsOpen;
   const icon = isOpen ? 'search' : 'angle-down';
   const size = 'md';
+
+  if (selectProps.isLoading) {
+    return <Spinner inline />;
+  }
+
   return <Icon name={icon} size={size} />;
 }

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -16,7 +16,6 @@ import { SelectableValue, toOption } from '@grafana/data';
 import { useTheme2 } from '../../themes';
 import { t, Trans } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
-import { Spinner } from '../Spinner/Spinner';
 
 import { CustomInput } from './CustomInput';
 import { DropdownIndicator } from './DropdownIndicator';
@@ -364,7 +363,8 @@ export function SelectBase<T, Rest = {}>({
             );
           },
           LoadingIndicator() {
-            return <Spinner inline />;
+            // Handled with DropdownIndicator, to avoid resize flickering with auto width
+            return null;
           },
           LoadingMessage() {
             return <div className={styles.loadingMessage}>{loadingMessage}</div>;

packages/grafana-ui/src/components/Spinner/Spinner.tsx

@@ -96,6 +96,7 @@ export const Spinner = ({
 const getStyles = (theme: GrafanaTheme2) => ({
   inline: css({
     display: 'inline-block',
+    lineHeight: 0,
   }),
   spin: css({
     [theme.transitions.handleMotion('no-preference')]: {

public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap

@@ -67,7 +67,7 @@ exports[`VariableQueryEditor renders correctly 1`] = `
               </div>
             </div>
             <div
-              class="css-zyjsuv-input-suffix"
+              class="css-1h17wob-input-suffix"
             >
               <svg
                 aria-hidden="true"