[AO] Fix overview alerts loading state (#150868)

Fixes #140387

## Summary

Fix alerts table lazy loading state

Before

![image](https://user-images.githubusercontent.com/12370520/218094792-24d00334-5414-4737-8f64-d619cbcc9f12.png)

After

![image](https://user-images.githubusercontent.com/12370520/218094828-6b3559ce-1f7a-45a7-ae0d-96f5dad141a1.png)

x-pack/plugins/observability/public/pages/overview/containers/overview_page/overview_page.tsx

@@ -218,9 +218,10 @@ export function OverviewPage() {
               <AlertsStateTable
                 alertsTableConfigurationRegistry={alertsTableConfigurationRegistry}
                 configurationId={AlertConsumers.OBSERVABILITY}
-                id={ALERTS_TABLE_ID}
                 flyoutSize="s"
                 featureIds={observabilityAlertFeatureIds}
+                hideLazyLoader
+                id={ALERTS_TABLE_ID}
                 pageSize={ALERTS_PER_PAGE}
                 query={esQuery}
                 showExpandToDetails={false}

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/alert_summary_widget.tsx

@@ -5,14 +5,14 @@
  * 2.0.
  */
 
-import { EuiLoadingChart } from '@elastic/eui';
 import React from 'react';
 import { useLoadAlertSummary } from '../../hooks/use_load_alert_summary';
 import { AlertSummaryWidgetProps } from '.';
 import {
   AlertSummaryWidgetError,
-  AlertsSummaryWidgetCompact,
+  AlertSummaryWidgetCompact,
-  AlertsSummaryWidgetFullSize,
+  AlertSummaryWidgetFullSize,
+  AlertSummaryWidgetLoader,
 } from './components';
 
 export const AlertSummaryWidget = ({
@@ -33,25 +33,14 @@ export const AlertSummaryWidget = ({
     timeRange,
   });
 
-  if (isLoading)
+  if (isLoading) return <AlertSummaryWidgetLoader fullSize={fullSize} />;
-    return (
+
-      <div
-        style={{
-          minHeight: fullSize ? 238 : 224,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <EuiLoadingChart size="l" data-test-subj="alertSummaryWidgetLoading" />
-      </div>
-    );
   if (error) return <AlertSummaryWidgetError />;
 
   return fullSize ? (
     // Only show full size version if there is data
     activeAlertCount || recoveredAlertCount ? (
-      <AlertsSummaryWidgetFullSize
+      <AlertSummaryWidgetFullSize
         activeAlertCount={activeAlertCount}
         activeAlerts={activeAlerts}
         recoveredAlertCount={recoveredAlertCount}
@@ -60,7 +49,7 @@ export const AlertSummaryWidget = ({
       />
     ) : null
   ) : (
-    <AlertsSummaryWidgetCompact
+    <AlertSummaryWidgetCompact
       activeAlertCount={activeAlertCount}
       activeAlerts={activeAlerts}
       onClick={onClick}

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.stories.tsx

@@ -6,7 +6,7 @@
  */
 
 import { action } from '@storybook/addon-actions';
-import { AlertsSummaryWidgetCompact as Component } from './alert_summary_widget_compact';
+import { AlertSummaryWidgetCompact as Component } from './alert_summary_widget_compact';
 import { mockedAlertSummaryResponse, mockedChartThemes } from '../../../mock/alert_summary_widget';
 
 export default {

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.test.tsx

@@ -8,17 +8,17 @@
 import React from 'react';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import {
-  AlertsSummaryWidgetCompact,
+  AlertSummaryWidgetCompact,
-  AlertsSummaryWidgetCompactProps,
+  AlertSummaryWidgetCompactProps,
 } from './alert_summary_widget_compact';
 import { render } from '@testing-library/react';
 import { mockedAlertSummaryResponse, mockedChartThemes } from '../../../mock/alert_summary_widget';
 
-describe('AlertsSummaryWidgetCompact', () => {
+describe('AlertSummaryWidgetCompact', () => {
-  const renderComponent = (props: Partial<AlertsSummaryWidgetCompactProps> = {}) =>
+  const renderComponent = (props: Partial<AlertSummaryWidgetCompactProps> = {}) =>
     render(
       <IntlProvider locale="en">
-        <AlertsSummaryWidgetCompact
+        <AlertSummaryWidgetCompact
           chartThemes={mockedChartThemes}
           onClick={jest.fn}
           {...mockedAlertSummaryResponse}
@@ -27,7 +27,7 @@ describe('AlertsSummaryWidgetCompact', () => {
       </IntlProvider>
     );
 
-  it('should render AlertsSummaryWidgetCompact', async () => {
+  it('should render AlertSummaryWidgetCompact', async () => {
     const alertSummaryWidget = renderComponent();
 
     expect(alertSummaryWidget.queryByTestId('alertSummaryWidgetCompact')).toBeTruthy();

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx

@@ -14,7 +14,7 @@ import { AlertCounts } from './alert_counts';
 import { ALL_ALERT_COLOR, WIDGET_TITLE } from './constants';
 import { Alert, ChartThemes } from '../types';
 
-export interface AlertsSummaryWidgetCompactProps {
+export interface AlertSummaryWidgetCompactProps {
   activeAlertCount: number;
   activeAlerts: Alert[];
   chartThemes: ChartThemes;
@@ -23,14 +23,14 @@ export interface AlertsSummaryWidgetCompactProps {
   onClick: (status?: AlertStatus) => void;
 }
 
-export const AlertsSummaryWidgetCompact = ({
+export const AlertSummaryWidgetCompact = ({
   activeAlertCount,
   activeAlerts,
   chartThemes: { theme, baseTheme },
   recoveredAlertCount,
   timeRangeTitle,
   onClick,
-}: AlertsSummaryWidgetCompactProps) => {
+}: AlertSummaryWidgetCompactProps) => {
   const chartTheme = [
     theme,
     EUI_SPARKLINE_THEME_PARTIAL,

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.stories.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { AlertsSummaryWidgetFullSize as Component } from './alert_summary_widget_full_size';
+import { AlertSummaryWidgetFullSize as Component } from './alert_summary_widget_full_size';
 import { mockedAlertSummaryResponse, mockedChartThemes } from '../../../mock/alert_summary_widget';
 
 export default {

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.test.tsx

@@ -8,17 +8,17 @@
 import React from 'react';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import {
-  AlertsSummaryWidgetFullSize,
+  AlertSummaryWidgetFullSize,
-  AlertsSummaryWidgetFullSizeProps,
+  AlertSummaryWidgetFullSizeProps,
 } from './alert_summary_widget_full_size';
 import { render } from '@testing-library/react';
 import { mockedAlertSummaryResponse, mockedChartThemes } from '../../../mock/alert_summary_widget';
 
 describe('AlertSummaryWidgetFullSize', () => {
-  const renderComponent = (props: Partial<AlertsSummaryWidgetFullSizeProps> = {}) =>
+  const renderComponent = (props: Partial<AlertSummaryWidgetFullSizeProps> = {}) =>
     render(
       <IntlProvider locale="en">
-        <AlertsSummaryWidgetFullSize
+        <AlertSummaryWidgetFullSize
           chartThemes={mockedChartThemes}
           {...mockedAlertSummaryResponse}
           {...props}

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx

@@ -13,7 +13,7 @@ import { AlertCounts } from './alert_counts';
 import { ALL_ALERT_COLOR, TOOLTIP_DATE_FORMAT } from './constants';
 import { Alert, ChartThemes } from '../types';
 
-export interface AlertsSummaryWidgetFullSizeProps {
+export interface AlertSummaryWidgetFullSizeProps {
   activeAlertCount: number;
   activeAlerts: Alert[];
   chartThemes: ChartThemes;
@@ -21,13 +21,13 @@ export interface AlertsSummaryWidgetFullSizeProps {
   dateFormat?: string;
 }
 
-export const AlertsSummaryWidgetFullSize = ({
+export const AlertSummaryWidgetFullSize = ({
   activeAlertCount,
   activeAlerts,
   chartThemes: { theme, baseTheme },
   dateFormat,
   recoveredAlertCount,
-}: AlertsSummaryWidgetFullSizeProps) => {
+}: AlertSummaryWidgetFullSizeProps) => {
   const chartTheme = [
     theme,
     {

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_loader.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiLoadingChart } from '@elastic/eui';
+import { AlertSummaryWidgetProps } from '..';
+
+type Props = Pick<AlertSummaryWidgetProps, 'fullSize'>;
+
+export const AlertSummaryWidgetLoader = ({ fullSize }: Props) => {
+  return (
+    <div
+      style={{
+        minHeight: fullSize ? 238 : 224,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <EuiLoadingChart size="l" data-test-subj="alertSummaryWidgetLoading" />
+    </div>
+  );
+};

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/index.ts

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
-export { AlertsSummaryWidgetCompact } from './alert_summary_widget_compact';
+export { AlertSummaryWidgetCompact } from './alert_summary_widget_compact';
 export { AlertSummaryWidgetError } from './alert_summary_widget_error';
-export { AlertsSummaryWidgetFullSize } from './alert_summary_widget_full_size';
+export { AlertSummaryWidgetFullSize } from './alert_summary_widget_full_size';
+export { AlertSummaryWidgetLoader } from './alert_summary_widget_loader';

x-pack/plugins/triggers_actions_ui/public/application/sections/index.tsx

@@ -58,9 +58,6 @@ export const RuleDefinition = suspendedComponentWithProps(
 export const RuleTagBadge = suspendedComponentWithProps(
   lazy(() => import('./rules_list/components/rule_tag_badge'))
 );
-export const AlertSummaryWidget = suspendedComponentWithProps(
-  lazy(() => import('./alert_summary_widget/alert_summary_widget'))
-);
 export const RuleStatusPanel = suspendedComponentWithProps(
   lazy(() => import('./rule_details/components/rule_status_panel'))
 );

x-pack/plugins/triggers_actions_ui/public/common/get_alerts_table_state.tsx

@@ -7,6 +7,7 @@
 
 import { EuiLoadingSpinner } from '@elastic/eui';
 import React, { lazy, Suspense } from 'react';
+import { LazyLoadProps } from '../types';
 
 import type { AlertsTableStateProps } from '../application/sections/alerts_table/alerts_table_state';
 
@@ -14,8 +15,11 @@ const AlertsTableStateLazy: React.FC<AlertsTableStateProps> = lazy(
   () => import('../application/sections/alerts_table/alerts_table_state')
 );
 
-export const getAlertsTableStateLazy = (props: AlertsTableStateProps) => (
+export const getAlertsTableStateLazy = ({
-  <Suspense fallback={<EuiLoadingSpinner />}>
+  hideLazyLoader,
+  ...props
+}: AlertsTableStateProps & LazyLoadProps) => (
+  <Suspense fallback={hideLazyLoader ? null : <EuiLoadingSpinner />}>
     <AlertsTableStateLazy {...props} />
   </Suspense>
 );

x-pack/plugins/triggers_actions_ui/public/common/get_rule_alerts_summary.tsx

@@ -5,10 +5,18 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
-import { AlertSummaryWidget } from '../application/sections';
+import { AlertSummaryWidgetLoader } from '../application/sections/alert_summary_widget/components';
 import { AlertSummaryWidgetProps } from '../application/sections/alert_summary_widget';
 
+const AlertSummaryWidgetLazy: React.FC<AlertSummaryWidgetProps> = lazy(
+  () => import('../application/sections/alert_summary_widget/alert_summary_widget')
+);
+
 export const getAlertSummaryWidgetLazy = (props: AlertSummaryWidgetProps) => {
-  return <AlertSummaryWidget {...props} />;
+  return (
+    <Suspense fallback={<AlertSummaryWidgetLoader fullSize={props.fullSize} />}>
+      <AlertSummaryWidgetLazy {...props} />
+    </Suspense>
+  );
 };

x-pack/plugins/triggers_actions_ui/public/plugin.ts

@@ -47,6 +47,7 @@ import {
   ExperimentalFeatures,
   parseExperimentalConfigValue,
 } from '../common/experimental_features';
+import { LazyLoadProps } from './types';
 
 import type {
   ActionTypeModel,
@@ -111,7 +112,9 @@ export interface TriggersAndActionsUIPublicPluginStart {
     props: Omit<RuleEditProps, 'actionTypeRegistry' | 'ruleTypeRegistry'>
   ) => ReactElement<RuleEditProps>;
   getAlertsTable: (props: AlertsTableProps) => ReactElement<AlertsTableProps>;
-  getAlertsStateTable: (props: AlertsTableStateProps) => ReactElement<AlertsTableStateProps>;
+  getAlertsStateTable: (
+    props: AlertsTableStateProps & LazyLoadProps
+  ) => ReactElement<AlertsTableStateProps>;
   getAlertsSearchBar: (props: AlertsSearchBarProps) => ReactElement<AlertsSearchBarProps>;
   getFieldBrowser: (props: FieldBrowserProps) => ReactElement<FieldBrowserProps>;
   getRuleStatusDropdown: (props: RuleStatusDropdownProps) => ReactElement<RuleStatusDropdownProps>;
@@ -381,7 +384,7 @@ export class Plugin
           connectorServices: this.connectorServices!,
         });
       },
-      getAlertsStateTable: (props: AlertsTableStateProps) => {
+      getAlertsStateTable: (props: AlertsTableStateProps & LazyLoadProps) => {
         return getAlertsTableStateLazy(props);
       },
       getAlertsSearchBar: (props: AlertsSearchBarProps) => {

x-pack/plugins/triggers_actions_ui/public/types.ts

@@ -666,3 +666,7 @@ export interface UpdateRulesToBulkEditProps {
   rules?: RuleTableItem[];
   filter?: KueryNode | null;
 }
+
+export interface LazyLoadProps {
+  hideLazyLoader?: boolean;
+}