[Stack Monitoring] Fix blank page between loading page and overview (#…

…114550) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Oct 12, 2021 · 435404e · 435404e
1 parent f4ef2b1
commit 435404e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/x-pack/plugins/monitoring/public/application/pages/loading_page.tsx b/x-pack/plugins/monitoring/public/application/pages/loading_page.tsx
@@ -15,12 +15,20 @@ import { CODE_PATH_ELASTICSEARCH } from '../../../common/constants';
 
 const CODE_PATHS = [CODE_PATH_ELASTICSEARCH];
 
-export const LoadingPage = () => {
+export const LoadingPage = ({ staticLoadingState }: { staticLoadingState?: boolean }) => {
   const { clusters, loaded } = useClusters(null, undefined, CODE_PATHS);
   const title = i18n.translate('xpack.monitoring.loading.pageTitle', {
     defaultMessage: 'Loading',
   });
 
+  if (staticLoadingState) {
+    return (
+      <PageTemplate title={title}>
+        <PageLoading />;
+      </PageTemplate>
+    );
+  }
+
   return (
     <PageTemplate title={title}>
       {loaded === false ? <PageLoading /> : renderRedirections(clusters)}

diff --git a/x-pack/plugins/monitoring/public/application/route_init.tsx b/x-pack/plugins/monitoring/public/application/route_init.tsx
@@ -9,6 +9,7 @@ import { Route, Redirect, useLocation } from 'react-router-dom';
 import { useClusters } from './hooks/use_clusters';
 import { GlobalStateContext } from './contexts/global_state_context';
 import { getClusterFromClusters } from '../lib/get_cluster_from_clusters';
+import { LoadingPage } from './pages/loading_page';
 
 export interface ComponentProps {
   clusters: [];
@@ -66,7 +67,9 @@ export const RouteInit: React.FC<RouteInitProps> = ({
     <Route path={path}>
       <Component clusters={clusters} />
     </Route>
-  ) : null;
+  ) : (
+    <LoadingPage staticLoadingState />
+  );
 };
 
 const isExpired = (license: any): boolean => {