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

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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}

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%"