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 ;
+ }
+
return ;
}
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({
);
},
LoadingIndicator() {
- return ;
+ // Handled with DropdownIndicator, to avoid resize flickering with auto width
+ return null;
},
LoadingMessage() {
return {loadingMessage}
;
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`] = `