feat: 🎸 show spinner while shring panels are loading

Author: streamich

x-pack/plugins/reporting/public/components/panel_spinner.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as React from 'react';
+import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
+
+export const PanelSpinner: React.FC = (props) => {
+  return (
+    <>
+      <EuiSpacer />
+      <EuiFlexGroup justifyContent="spaceAround">
+        <EuiFlexItem grow={false}>
+          <EuiLoadingSpinner size="l" />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer />
+    </>
+  );
+};

x-pack/plugins/reporting/public/components/reporting_panel_content_lazy.tsx

@@ -6,6 +6,7 @@
 
 import * as React from 'react';
 import { lazy, Suspense, FC } from 'react';
+import { PanelSpinner } from './panel_spinner';
 import type { Props } from './reporting_panel_content';
 
 const LazyComponent = lazy(() =>
@@ -16,7 +17,7 @@ const LazyComponent = lazy(() =>
 
 export const ReportingPanelContent: FC<Omit<Props, 'intl'>> = (props) => {
   return (
-    <Suspense fallback={null}>
+    <Suspense fallback={<PanelSpinner />}>
       <LazyComponent {...props} />
     </Suspense>
   );

x-pack/plugins/reporting/public/components/screen_capture_panel_content_lazy.tsx

@@ -6,6 +6,7 @@
 
 import * as React from 'react';
 import { lazy, Suspense, FC } from 'react';
+import { PanelSpinner } from './panel_spinner';
 import type { Props } from './screen_capture_panel_content';
 
 const LazyComponent = lazy(() =>
@@ -16,7 +17,7 @@ const LazyComponent = lazy(() =>
 
 export const ScreenCapturePanelContent: FC<Props> = (props) => {
   return (
-    <Suspense fallback={null}>
+    <Suspense fallback={<PanelSpinner />}>
       <LazyComponent {...props} />
     </Suspense>
   );