Don't show loading screen during auto-reload (elastic#83376)

Co-authored-by: Kibana Machine <[email protected]>
phillipb · Nov 17, 2020 · 95b51e3 · 95b51e3
1 parent 242eae0
commit 95b51e3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/layout.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/layout.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import useInterval from 'react-use/lib/useInterval';
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
@@ -32,6 +32,7 @@ import { BottomDrawer } from './bottom_drawer';
 import { Legend } from './waffle/legend';
 
 export const Layout = () => {
+ const [showLoading, setShowLoading] = useState(true);
  const { sourceId, source } = useSourceContext();
  const { currentView, shouldLoadDefault } = useSavedViewContext();
  const {
@@ -100,6 +101,16 @@ export const Layout = () => {
  }
  }, [reload, currentView, shouldLoadDefault]);
 
+ useEffect(() => {
+ setShowLoading(true);
+ }, [options.metric, nodeType]);
+
+ useEffect(() => {
+ const hasNodes = nodes && nodes.length;
+ // Don't show loading screen when we're auto-reloading
+ setShowLoading(!hasNodes);
+ }, [nodes]);
+
  return (
  <>
  <PageContent>
@@ -130,6 +141,7 @@ export const Layout = () => {
  options={options}
  nodeType={nodeType}
  loading={loading}
+ showLoading={showLoading}
  reload={reload}
  onDrilldown={applyFilterQuery}
  currentTime={currentTime}

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx
@@ -37,6 +37,7 @@ interface Props {
  formatter: InfraFormatter;
  bottomMargin: number;
  topMargin: number;
+ showLoading: boolean;
 }
 
 export const NodesOverview = ({
@@ -53,6 +54,7 @@ export const NodesOverview = ({
  onDrilldown,
  bottomMargin,
  topMargin,
+ showLoading,
 }: Props) => {
  const handleDrilldown = useCallback(
  (filter: string) => {
@@ -66,7 +68,8 @@ export const NodesOverview = ({
  );
 
  const noData = !loading && nodes && nodes.length === 0;
- if (loading) {
+ if (loading && showLoading) {
+ // Don't show loading screen when we're auto-reloading
  return (
  <InfraLoadingPanel
  height="100%"