8225 Fix missing grafana loader (#53)

Co-authored-by: Katarzyna Ziomek-Zdanowicz <[email protected]>

Author: 2 people

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -1,5 +1,5 @@
 import { cx } from '@emotion/css';
-import React, { PureComponent, ReactNode } from 'react';
+import React, { PureComponent, } from 'react';
 import { connect, ConnectedProps, MapDispatchToProps, MapStateToProps } from 'react-redux';
 
 import { NavModel, NavModelItem, TimeRange, PageLayoutType, locationUtil, GrafanaTheme2 } from '@grafana/data';
@@ -44,6 +44,8 @@ import { getTimeSrv } from '../services/TimeSrv';
 import { explicitlyControlledMigrationPanels, autoMigrateAngular } from '../state/PanelModel';
 import { cleanUpDashboardAndVariables } from '../state/actions';
 import { initDashboard } from '../state/initDashboard';
+import { FNDashboardProps } from 'app/fn-app/types';
+import { isUndefined, isEmpty, noop } from 'lodash';
 
 import { DashboardPageRouteParams, DashboardPageRouteSearchParams } from './types';
 
@@ -90,7 +92,8 @@ const connector = connect(mapStateToProps, mapDispatchToProps);
 type OwnProps = {
   isPublic?: boolean;
   controlsContainer?: string | null;
-  fnLoader?: ReactNode;
+  fnLoader?: FNDashboardProps['fnLoader'];
+  isLoading?: FNDashboardProps['isLoading']
 };
 
 export type DashboardPageProps = OwnProps &
@@ -396,14 +399,18 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
   };
 
   render() {
-    const { dashboard, initError, queryParams, isPublic, FNDashboard, fnLoader } = this.props;
+    const { dashboard, initError, queryParams, isPublic, FNDashboard, fnLoader, isLoading = noop } = this.props;
     const { editPanel, viewPanel, updateScrollTop, pageNav, sectionNav } = this.state;
     const kioskMode = FNDashboard ? KioskMode.FN : !isPublic ? getKioskMode(this.props.queryParams) : KioskMode.Full;
 
-    if (!dashboard) {
-      return fnLoader ? <>{fnLoader}</> : <DashboardLoading initPhase={this.props.initPhase} />;
+    if (!dashboard || isEmpty(queryParams)) {
+      isLoading(true)
+
+      return isUndefined(fnLoader) ? <DashboardLoading initPhase={this.props.initPhase} />: <>{fnLoader}</>;
     }
 
+    isLoading(false)
+
     const inspectPanel = this.getInspectPanel();
     const showSubMenu = !editPanel && !this.props.queryParams.editview;
 

public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx

@@ -1,4 +1,4 @@
-import { merge, isEmpty, isFunction } from 'lodash';
+import { merge,  isFunction } from 'lodash';
 import React, { useEffect, FC, useMemo } from 'react';
 
 import { locationService as locationSrv, HistoryWrapper } from '@grafana/runtime';
@@ -27,7 +27,7 @@ const DEFAULT_DASHBOARD_PAGE_PROPS: Pick<DashboardPageProps, 'history' | 'route'
 };
 
 export const RenderFNDashboard: FC<FNDashboardProps> = (props) => {
-  const { queryParams, controlsContainer, setErrors, fnLoader, hiddenVariables } = props;
+  const { queryParams, controlsContainer, setErrors, fnLoader, hiddenVariables, isLoading } = props;
 
   const firstError = useSelector((state: StoreState) => {
     const { appNotifications } = state;
@@ -67,9 +67,10 @@ export const RenderFNDashboard: FC<FNDashboardProps> = (props) => {
         hiddenVariables,
         controlsContainer,
         fnLoader,
+        isLoading
       }),
     [controlsContainer, fnLoader, hiddenVariables, props, queryParams]
   );
 
-  return isEmpty(queryParams || {}) ? <>{fnLoader}</> : <DashboardPage {...dashboardPageProps} />;
+  return <DashboardPage {...dashboardPageProps} />;
 };