[Metrics] Always display loading indicator when new data is loading (#48038) (#48176)

* [Metrics] Always display loading indicator when new data is loading

* Add loading data sources indicator to Metrics Explorer tab

Author: Zacqary

x-pack/legacy/plugins/infra/public/components/metrics_explorer/charts.tsx

@@ -38,13 +38,12 @@ export const MetricsExplorerCharts = ({
   options,
   chartOptions,
   onRefetch,
-
   onFilter,
   source,
   timeRange,
   onTimeChange,
 }: Props) => {
-  if (!data && loading) {
+  if (loading) {
     return (
       <InfraLoadingPanel
         height={800}

x-pack/legacy/plugins/infra/public/pages/infrastructure/metrics_explorer/index.tsx

@@ -11,6 +11,7 @@ import { StaticIndexPattern } from 'ui/index_patterns';
 import { DocumentTitle } from '../../../components/document_title';
 import { MetricsExplorerCharts } from '../../../components/metrics_explorer/charts';
 import { MetricsExplorerToolbar } from '../../../components/metrics_explorer/toolbar';
+import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { SourceQuery } from '../../../../common/graphql/types';
 import { NoData } from '../../../components/empty_states';
 import { useMetricsExplorerState } from './use_metric_explorer_state';
@@ -23,7 +24,7 @@ interface MetricsExplorerPageProps {
 
 export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExplorerPageProps) => {
   if (!source) {
-    return null;
+    return <SourceLoadingPage />;
   }
 
   const {