From 04692d1802d49ebc1a87fa2d7c63043ec9441bc2 Mon Sep 17 00:00:00 2001 From: Isaac Hellendag <2823852+hellendag@users.noreply.github.com> Date: Tue, 19 Sep 2023 15:56:52 -0500 Subject: [PATCH] [ui] Show a delayed loading spinner on Overview search inputs (#16607) ## Summary & Motivation Show a delayed loading spinner on Overview search inputs to inform the user that the workspace is still loading. This way, when they attempt a search that comes up empty, there will be an obvious reason for it: the workspace isn't ready yet. Screenshot 2023-09-18 at 4 59 43 PM I added a utility hook to `ui-components` for a delayed state update, which will allow us to wait briefly before showing the spinner. This prevents a quick flash of the spinner in cases where the workspace loads fairly quickly. I'll use the utility in a couple of places in Cloud that I've done this in recently. ## How I Tested These Changes View Overview, verify that spinners appear after a brief delay when the loading state is forced to be true. Storybook example for the utility hook. --- .../__stories__/useDelayedState.stories.tsx | 23 +++++++++++++++++ .../src/components/useDelayedState.tsx | 12 +++++++++ .../packages/ui-components/src/index.ts | 1 + .../ui-core/src/overview/OverviewJobsRoot.tsx | 8 +++++- .../src/overview/OverviewResourcesRoot.tsx | 10 +++++++- .../src/overview/OverviewSchedulesRoot.tsx | 10 +++++++- .../src/overview/OverviewSensorsRoot.tsx | 10 +++++++- .../ui-core/src/ui/SearchInputSpinner.tsx | 25 +++++++++++++++++++ 8 files changed, 95 insertions(+), 4 deletions(-) create mode 100644 js_modules/dagster-ui/packages/ui-components/src/components/__stories__/useDelayedState.stories.tsx create mode 100644 js_modules/dagster-ui/packages/ui-components/src/components/useDelayedState.tsx create mode 100644 js_modules/dagster-ui/packages/ui-core/src/ui/SearchInputSpinner.tsx diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/useDelayedState.stories.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/useDelayedState.stories.tsx new file mode 100644 index 0000000000000..c75623a6a0da3 --- /dev/null +++ b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/useDelayedState.stories.tsx @@ -0,0 +1,23 @@ +import {Meta} from '@storybook/react'; +import * as React from 'react'; + +import {Box} from '../Box'; +import {Button} from '../Button'; +import {useDelayedState} from '../useDelayedState'; + +// eslint-disable-next-line import/no-default-export +export default { + title: 'useDelayedState', +} as Meta; + +export const Default = () => { + const notDisabled = useDelayedState(5000); + return ( + +
The button will become enabled after five seconds.
+
+ +
+ + ); +}; diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/useDelayedState.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/useDelayedState.tsx new file mode 100644 index 0000000000000..4f1c601e06ce7 --- /dev/null +++ b/js_modules/dagster-ui/packages/ui-components/src/components/useDelayedState.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +export const useDelayedState = (delayMsec: number) => { + const [value, setValue] = React.useState(false); + + React.useEffect(() => { + const timer = setTimeout(() => setValue(true), delayMsec); + return () => clearTimeout(timer); + }, [delayMsec]); + + return value; +}; diff --git a/js_modules/dagster-ui/packages/ui-components/src/index.ts b/js_modules/dagster-ui/packages/ui-components/src/index.ts index 4c209b68e80ca..cca86333fa3a5 100644 --- a/js_modules/dagster-ui/packages/ui-components/src/index.ts +++ b/js_modules/dagster-ui/packages/ui-components/src/index.ts @@ -51,6 +51,7 @@ export * from './components/useSuggestionsForString'; export * from './components/ErrorBoundary'; export * from './components/useViewport'; export * from './components/StyledRawCodeMirror'; +export * from './components/useDelayedState'; // Global font styles, exported as styled-component components to render in // your app tree root. E.g. diff --git a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewJobsRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewJobsRoot.tsx index 2bc0aad15f7b4..f77494a269247 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewJobsRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewJobsRoot.tsx @@ -17,6 +17,7 @@ import {isHiddenAssetGroupJob} from '../asset-graph/Utils'; import {useDocumentTitle} from '../hooks/useDocumentTitle'; import {useQueryPersistedState} from '../hooks/useQueryPersistedState'; import {RepoFilterButton} from '../instance/RepoFilterButton'; +import {SearchInputSpinner} from '../ui/SearchInputSpinner'; import {WorkspaceContext} from '../workspace/WorkspaceContext'; import {buildRepoAddress} from '../workspace/buildRepoAddress'; import {repoAddressAsHumanString} from '../workspace/repoAddressAsString'; @@ -32,7 +33,7 @@ export const OverviewJobsRoot = () => { useTrackPageView(); useDocumentTitle('Overview | Jobs'); - const {allRepos, visibleRepos} = React.useContext(WorkspaceContext); + const {allRepos, visibleRepos, loading: workspaceLoading} = React.useContext(WorkspaceContext); const [searchValue, setSearchValue] = useQueryPersistedState({ queryKey: 'search', defaults: {search: ''}, @@ -128,6 +129,8 @@ export const OverviewJobsRoot = () => { return ; }; + const showSearchSpinner = (workspaceLoading && !repoCount) || (loading && !data); + return ( { : undefined + } onChange={(e) => setSearchValue(e.target.value)} placeholder="Filter by job name…" style={{width: '340px'}} diff --git a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewResourcesRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewResourcesRoot.tsx index 5954f15f9ad4f..955bf2dbd5544 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewResourcesRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewResourcesRoot.tsx @@ -18,6 +18,7 @@ import {useQueryPersistedState} from '../hooks/useQueryPersistedState'; import {RepoFilterButton} from '../instance/RepoFilterButton'; import {RESOURCE_ENTRY_FRAGMENT} from '../resources/WorkspaceResourcesRoot'; import {ResourceEntryFragment} from '../resources/types/WorkspaceResourcesRoot.types'; +import {SearchInputSpinner} from '../ui/SearchInputSpinner'; import {WorkspaceContext} from '../workspace/WorkspaceContext'; import {buildRepoAddress} from '../workspace/buildRepoAddress'; import {repoAddressAsHumanString} from '../workspace/repoAddressAsString'; @@ -36,7 +37,7 @@ export const OverviewResourcesRoot = () => { useTrackPageView(); useDocumentTitle('Overview | Resources'); - const {allRepos, visibleRepos} = React.useContext(WorkspaceContext); + const {allRepos, visibleRepos, loading: workspaceLoading} = React.useContext(WorkspaceContext); const [searchValue, setSearchValue] = useQueryPersistedState({ queryKey: 'search', defaults: {search: ''}, @@ -133,6 +134,8 @@ export const OverviewResourcesRoot = () => { return ; }; + const showSearchSpinner = (workspaceLoading && !repoCount) || (loading && !data); + return ( { + ) : undefined + } onChange={(e) => setSearchValue(e.target.value)} placeholder="Filter by resource name…" style={{width: '340px'}} diff --git a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSchedulesRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSchedulesRoot.tsx index 51430a2709ebf..4cc51cabdd068 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSchedulesRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSchedulesRoot.tsx @@ -33,6 +33,7 @@ import {CheckAllBox} from '../ui/CheckAllBox'; import {useFilters} from '../ui/Filters'; import {useCodeLocationFilter} from '../ui/Filters/useCodeLocationFilter'; import {useInstigationStatusFilter} from '../ui/Filters/useInstigationStatusFilter'; +import {SearchInputSpinner} from '../ui/SearchInputSpinner'; import {WorkspaceContext} from '../workspace/WorkspaceContext'; import {buildRepoAddress} from '../workspace/buildRepoAddress'; import {repoAddressAsHumanString} from '../workspace/repoAddressAsString'; @@ -55,7 +56,7 @@ export const OverviewSchedulesRoot = () => { useTrackPageView(); useDocumentTitle('Overview | Schedules'); - const {allRepos, visibleRepos} = React.useContext(WorkspaceContext); + const {allRepos, visibleRepos, loading: workspaceLoading} = React.useContext(WorkspaceContext); const repoCount = allRepos.length; const [searchValue, setSearchValue] = useQueryPersistedState({ queryKey: 'search', @@ -245,6 +246,8 @@ export const OverviewSchedulesRoot = () => { ); }; + const showSearchSpinner = (workspaceLoading && !repoCount) || (loading && !data); + return ( { + ) : undefined + } onChange={(e) => { setSearchValue(e.target.value); onToggleAll(false); diff --git a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensorsRoot.tsx b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensorsRoot.tsx index dcc5b93cd6914..c813f641a3aa2 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensorsRoot.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensorsRoot.tsx @@ -33,6 +33,7 @@ import {CheckAllBox} from '../ui/CheckAllBox'; import {useFilters} from '../ui/Filters'; import {useCodeLocationFilter} from '../ui/Filters/useCodeLocationFilter'; import {useInstigationStatusFilter} from '../ui/Filters/useInstigationStatusFilter'; +import {SearchInputSpinner} from '../ui/SearchInputSpinner'; import {WorkspaceContext} from '../workspace/WorkspaceContext'; import {buildRepoAddress} from '../workspace/buildRepoAddress'; import {repoAddressAsHumanString} from '../workspace/repoAddressAsString'; @@ -55,7 +56,7 @@ export const OverviewSensorsRoot = () => { useTrackPageView(); useDocumentTitle('Overview | Sensors'); - const {allRepos, visibleRepos} = React.useContext(WorkspaceContext); + const {allRepos, visibleRepos, loading: workspaceLoading} = React.useContext(WorkspaceContext); const repoCount = allRepos.length; const [searchValue, setSearchValue] = useQueryPersistedState({ queryKey: 'search', @@ -245,6 +246,8 @@ export const OverviewSensorsRoot = () => { ); }; + const showSearchSpinner = (workspaceLoading && !repoCount) || (loading && !data); + return ( { + ) : undefined + } onChange={(e) => setSearchValue(e.target.value)} placeholder="Filter by sensor name…" style={{width: '340px'}} diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/SearchInputSpinner.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/SearchInputSpinner.tsx new file mode 100644 index 0000000000000..699ac9c95abf9 --- /dev/null +++ b/js_modules/dagster-ui/packages/ui-core/src/ui/SearchInputSpinner.tsx @@ -0,0 +1,25 @@ +import {Box, Spinner, Tooltip, useDelayedState} from '@dagster-io/ui-components'; +import * as React from 'react'; + +interface Props { + tooltipContent: string | React.ReactElement | null; +} + +const SPINNER_WAIT_MSEC = 2000; + +export const SearchInputSpinner = (props: Props) => { + const {tooltipContent} = props; + const canShowSpinner = useDelayedState(SPINNER_WAIT_MSEC); + + if (!canShowSpinner) { + return null; + } + + return ( + + + + + + ); +};