IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: Use LoadingBar in CommandPalette (#77506)

Browse Source 
try using LoadingBar in CommandPalette
This commit is contained in:
Ashley Harrison 2023-11-03 09:54:25 +00:00 committed by GitHub
parent c50ada3a1a
commit f32bc17422
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/app/features/commandPalette/CommandPalette.tsx
View File

@ -16,7 +16,7 @@ import React, { useEffect, useMemo, useRef } from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { reportInteraction } from '@grafana/runtime'; 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 { t } from 'app/core/internationalization';
import { KBarResults } from './KBarResults'; import { KBarResults } from './KBarResults';
@ -58,11 +58,14 @@ export function CommandPalette() {
<FocusScope contain autoFocus restoreFocus> <FocusScope contain autoFocus restoreFocus>
<div {...overlayProps} {...dialogProps}> <div {...overlayProps} {...dialogProps}>
<div className={styles.searchContainer}> <div className={styles.searchContainer}>
{isFetchingSearchResults ? <Spinner className={styles.spinner} /> : <Icon name="search" size="md" />} <Icon name="search" size="md" />
<KBarSearch <KBarSearch
defaultPlaceholder={t('command-palette.search-box.placeholder', 'Search or jump to...')} defaultPlaceholder={t('command-palette.search-box.placeholder', 'Search or jump to...')}
className={styles.search} className={styles.search}
/> />
<div className={styles.loadingBarContainer}>
{isFetchingSearchResults && <LoadingBar width={500} delay={0} />}
</div>
</div> </div>
<div className={styles.resultsContainer}> <div className={styles.resultsContainer}>
<RenderResults searchResults={searchResults} /> <RenderResults searchResults={searchResults} />
@ -161,6 +164,12 @@ const getSearchStyles = (theme: GrafanaTheme2) => {
overflow: 'hidden', overflow: 'hidden',
boxShadow: theme.shadows.z3, boxShadow: theme.shadows.z3,
}), }),
loadingBarContainer: css({
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
}),
searchContainer: css({ searchContainer: css({
alignItems: 'center', alignItems: 'center',
background: theme.components.input.background, background: theme.components.input.background,
@ -168,6 +177,7 @@ const getSearchStyles = (theme: GrafanaTheme2) => {
display: 'flex', display: 'flex',
gap: theme.spacing(1), gap: theme.spacing(1),
padding: theme.spacing(1, 2), padding: theme.spacing(1, 2),
position: 'relative',
}), }),
search: css({ search: css({
fontSize: theme.typography.fontSize, fontSize: theme.typography.fontSize,