From d41f3e4de09937a4e1eaaf02b53f28bdf7496928 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Wed, 28 May 2025 09:54:14 +0200
Subject: [PATCH] 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          | 1 -
 .../grafana-ui/src/components/Select/DropdownIndicator.tsx  | 6 ++++++
 packages/grafana-ui/src/components/Select/SelectBase.tsx    | 4 ++--
 packages/grafana-ui/src/components/Spinner/Spinner.tsx      | 1 +
 .../__snapshots__/VariableQueryEditor.test.tsx.snap         | 2 +-
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx
index f812b863840..43dae3faa29 100644
--- a/packages/grafana-ui/src/components/Input/Input.tsx
+++ b/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,
diff --git a/packages/grafana-ui/src/components/Select/DropdownIndicator.tsx b/packages/grafana-ui/src/components/Select/DropdownIndicator.tsx
index c95d2e32e2c..b9d83f6a6d6 100644
--- a/packages/grafana-ui/src/components/Select/DropdownIndicator.tsx
+++ b/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} />;
 }
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index c9fd5253441..1c5b7f3d913 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/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>;
diff --git a/packages/grafana-ui/src/components/Spinner/Spinner.tsx b/packages/grafana-ui/src/components/Spinner/Spinner.tsx
index 079aa3997d5..6e8161d58f1 100644
--- a/packages/grafana-ui/src/components/Spinner/Spinner.tsx
+++ b/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')]: {
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap b/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap
index 5506942fcce..fa53a1bac2d 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap
+++ b/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"