diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx index 93427ae8b08..0ccb405da39 100644 --- a/public/app/features/commandPalette/CommandPalette.tsx +++ b/public/app/features/commandPalette/CommandPalette.tsx @@ -16,7 +16,7 @@ import React, { useEffect, useMemo, useRef } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { reportInteraction } from '@grafana/runtime'; -import { Icon, Spinner, useStyles2 } from '@grafana/ui'; +import { Icon, LoadingBar, useStyles2 } from '@grafana/ui'; import { t } from 'app/core/internationalization'; import { KBarResults } from './KBarResults'; @@ -58,11 +58,14 @@ export function CommandPalette() {
- {isFetchingSearchResults ? : } + +
+ {isFetchingSearchResults && } +
@@ -161,6 +164,12 @@ const getSearchStyles = (theme: GrafanaTheme2) => { overflow: 'hidden', boxShadow: theme.shadows.z3, }), + loadingBarContainer: css({ + position: 'absolute', + left: 0, + right: 0, + bottom: 0, + }), searchContainer: css({ alignItems: 'center', background: theme.components.input.background, @@ -168,6 +177,7 @@ const getSearchStyles = (theme: GrafanaTheme2) => { display: 'flex', gap: theme.spacing(1), padding: theme.spacing(1, 2), + position: 'relative', }), search: css({ fontSize: theme.typography.fontSize,