From 49ac8b9f0a1828fa0eb067c406ab309850ef761e Mon Sep 17 00:00:00 2001 From: kay delaney <45561153+kaydelaney@users.noreply.github.com> Date: Wed, 23 Feb 2022 09:35:42 +0000 Subject: [PATCH] Dashboards: Move slow dashboard logic to css (#45686) --- .../DashboardLoading/DashboardLoading.tsx | 12 +++++++++++- .../dashboard/containers/DashboardPage.test.tsx | 13 ------------- .../dashboard/containers/DashboardPage.tsx | 9 ++------- .../features/dashboard/state/initDashboard.ts | 16 +--------------- .../features/dashboard/state/reducers.test.ts | 10 ---------- public/app/features/dashboard/state/reducers.ts | 7 ------- public/app/types/dashboard.ts | 1 - 7 files changed, 14 insertions(+), 54 deletions(-) diff --git a/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx b/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx index aea6b7dbd87..97ee5b5d417 100644 --- a/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx +++ b/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { css } from '@emotion/css'; +import { css, keyframes } from '@emotion/css'; import { Button, HorizontalGroup, Spinner, useStyles, VerticalGroup } from '@grafana/ui'; import { locationService } from '@grafana/runtime'; import { GrafanaTheme } from '@grafana/data'; @@ -34,12 +34,22 @@ export const DashboardLoading = ({ initPhase }: Props) => { }; export const getStyles = (theme: GrafanaTheme) => { + // Amount of time we want to pass before we start showing loading spinner + const slowStartThreshold = '0.5s'; + + const invisibleToVisible = keyframes` + 0% { opacity: 0%; } + 100% { opacity: 100%; } + `; + return { dashboardLoading: css` height: 60vh; display: flex; + opacity: 0%; align-items: center; justify-content: center; + animation: ${invisibleToVisible} 0s step-end ${slowStartThreshold} 1 normal forwards; `, dashboardLoadingText: css` font-size: ${theme.typography.size.lg}; diff --git a/public/app/features/dashboard/containers/DashboardPage.test.tsx b/public/app/features/dashboard/containers/DashboardPage.test.tsx index 4ad019ea2cf..4c68581de51 100644 --- a/public/app/features/dashboard/containers/DashboardPage.test.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.test.tsx @@ -103,7 +103,6 @@ function dashboardPageScenario(description: string, scenarioFn: (ctx: ScenarioCo route: { routeName: DashboardRoutes.Normal } as any, }), initPhase: DashboardInitPhase.NotStarted, - isInitSlow: false, initError: null, initDashboard: jest.fn(), notifyApp: mockToolkitActionCreator(notifyApp), @@ -169,18 +168,6 @@ describe('DashboardPage', () => { urlSlug: 'my-dash', urlUid: '11', }); - expect(ctx.container).toBeEmptyDOMElement(); - }); - }); - - dashboardPageScenario('Given dashboard slow loading state', (ctx) => { - ctx.setup(() => { - ctx.mount(); - ctx.rerender({ isInitSlow: true }); - }); - - it('Should show spinner', () => { - expect(screen.getByText('Cancel loading dashboard')).toBeInTheDocument(); }); }); diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index 09ab1695faf..860e645f6bb 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -52,7 +52,6 @@ type DashboardPageRouteSearchParams = { export const mapStateToProps = (state: StoreState) => ({ initPhase: state.dashboard.initPhase, - isInitSlow: state.dashboard.isInitSlow, initError: state.dashboard.initError, dashboard: state.dashboard.getModel(), }); @@ -311,17 +310,13 @@ export class UnthemedDashboardPage extends PureComponent { } render() { - const { dashboard, isInitSlow, initError, queryParams, theme } = this.props; + const { dashboard, initError, queryParams, theme } = this.props; const { editPanel, viewPanel, updateScrollTop } = this.state; const kioskMode = getKioskMode(); const styles = getStyles(theme, kioskMode); if (!dashboard) { - if (isInitSlow) { - return ; - } - - return null; + return ; } const inspectPanel = this.getInspectPanel(); diff --git a/public/app/features/dashboard/state/initDashboard.ts b/public/app/features/dashboard/state/initDashboard.ts index 91dc7c58280..eef4165468d 100644 --- a/public/app/features/dashboard/state/initDashboard.ts +++ b/public/app/features/dashboard/state/initDashboard.ts @@ -7,13 +7,7 @@ import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv'; import { keybindingSrv } from 'app/core/services/keybindingSrv'; // Actions import { notifyApp } from 'app/core/actions'; -import { - dashboardInitCompleted, - dashboardInitFailed, - dashboardInitFetching, - dashboardInitServices, - dashboardInitSlow, -} from './reducers'; +import { dashboardInitCompleted, dashboardInitFailed, dashboardInitFetching, dashboardInitServices } from './reducers'; // Types import { DashboardDTO, DashboardInitPhase, DashboardRoutes, StoreState, ThunkDispatch, ThunkResult } from 'app/types'; import { DashboardModel } from './DashboardModel'; @@ -110,14 +104,6 @@ export function initDashboard(args: InitDashboardArgs): ThunkResult { // set fetching state dispatch(dashboardInitFetching()); - // Detect slow loading / initializing and set state flag - // This is in order to not show loading indication for fast loading dashboards as it creates blinking/flashing - setTimeout(() => { - if (getState().dashboard.getModel() === null) { - dispatch(dashboardInitSlow()); - } - }, 500); - // fetch dashboard data const dashDTO = await fetchDashboard(args, dispatch, getState); diff --git a/public/app/features/dashboard/state/reducers.test.ts b/public/app/features/dashboard/state/reducers.test.ts index 56e659c7770..f98a4fa6dec 100644 --- a/public/app/features/dashboard/state/reducers.test.ts +++ b/public/app/features/dashboard/state/reducers.test.ts @@ -2,7 +2,6 @@ import { dashboardInitCompleted, dashboardInitFailed, dashboardInitFetching, - dashboardInitSlow, loadDashboardPermissions, dashboardReducer, initialState, @@ -32,7 +31,6 @@ describe('dashboard reducer', () => { beforeEach(() => { state = dashboardReducer(initialState, dashboardInitFetching()); - state = dashboardReducer(state, dashboardInitSlow()); state = dashboardReducer( state, dashboardInitCompleted( @@ -47,10 +45,6 @@ describe('dashboard reducer', () => { it('should set model', async () => { expect(state.getModel()!.title).toBe('My dashboard'); }); - - it('should set reset isInitSlow', async () => { - expect(state.isInitSlow).toBe(false); - }); }); describe('dashboardInitFailed', () => { @@ -65,10 +59,6 @@ describe('dashboard reducer', () => { expect(state.getModel()?.title).toBe('Dashboard init failed'); }); - it('should set reset isInitSlow', async () => { - expect(state.isInitSlow).toBe(false); - }); - it('should set initError', async () => { expect(state.initError?.message).toBe('Oh no'); }); diff --git a/public/app/features/dashboard/state/reducers.ts b/public/app/features/dashboard/state/reducers.ts index 5f34e4e5f8a..59cc5eadad2 100644 --- a/public/app/features/dashboard/state/reducers.ts +++ b/public/app/features/dashboard/state/reducers.ts @@ -8,7 +8,6 @@ import { PanelPlugin } from '@grafana/data'; export const initialState: DashboardState = { initPhase: DashboardInitPhase.NotStarted, - isInitSlow: false, getModel: () => null, permissions: [], initError: null, @@ -27,13 +26,9 @@ const dashboardSlice = createSlice({ dashboardInitServices: (state) => { state.initPhase = DashboardInitPhase.Services; }, - dashboardInitSlow: (state) => { - state.isInitSlow = true; - }, dashboardInitCompleted: (state, action: PayloadAction) => { state.getModel = () => action.payload; state.initPhase = DashboardInitPhase.Completed; - state.isInitSlow = false; }, dashboardInitFailed: (state, action: PayloadAction) => { state.initPhase = DashboardInitPhase.Failed; @@ -44,7 +39,6 @@ const dashboardSlice = createSlice({ }, cleanUpDashboard: (state) => { state.initPhase = DashboardInitPhase.NotStarted; - state.isInitSlow = false; state.initError = null; state.getModel = () => null; }, @@ -73,7 +67,6 @@ export const { loadDashboardPermissions, dashboardInitFetching, dashboardInitFailed, - dashboardInitSlow, dashboardInitCompleted, dashboardInitServices, cleanUpDashboard, diff --git a/public/app/types/dashboard.ts b/public/app/types/dashboard.ts index ba460c913fa..c5e51eb680c 100644 --- a/public/app/types/dashboard.ts +++ b/public/app/types/dashboard.ts @@ -77,7 +77,6 @@ export interface QueriesToUpdateOnDashboardLoad { export interface DashboardState { getModel: GetMutableDashboardModelFn; initPhase: DashboardInitPhase; - isInitSlow: boolean; initError: DashboardInitError | null; permissions: DashboardAcl[]; }