load lazy and remove export from public

elastic · Aug 2, 2021 · 26c9151 · 26c9151
1 parent 695c8e1
commit 26c9151
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 28 deletions.
diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
@@ -107,7 +107,7 @@ pageLoadAssetSize:
   dataVisualizer: 27530
   banners: 17946
   mapsEms: 26072
-  timelines: 348576
+  timelines: 327300
   screenshotMode: 17856
   visTypePie: 35583
   expressionRevealImage: 25675

diff --git a/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx b/x-pack/plugins/timelines/public/components/t_grid/body/index.tsx
@@ -11,10 +11,19 @@ import {
   EuiDataGridControlColumn,
   EuiDataGridStyle,
   EuiDataGridToolBarVisibilityOptions,
+  EuiLoadingSpinner,
 } from '@elastic/eui';
 import { getOr } from 'lodash/fp';
 import memoizeOne from 'memoize-one';
-import React, { ComponentType, useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  ComponentType,
+  lazy,
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
 import { BulkActionsProp, TimelineId, TimelineTabs } from '../../../../common/types/timeline';
@@ -36,14 +45,17 @@ import type { BrowserFields } from '../../../../common/search_strategy/index_fie
 import type { OnRowSelected, OnSelectAll } from '../types';
 import type { Refetch } from '../../../store/t_grid/inputs';
 import { StatefulFieldsBrowser } from '../../../';
-import { StatefulAlertStatusBulkActions } from '../toolbar/bulk_actions/alert_status_bulk_actions';
 import { tGridActions, TGridModel, tGridSelectors, TimelineState } from '../../../store/t_grid';
 import { useDeepEqualSelector } from '../../../hooks/use_selector';
 import { RowAction } from './row_action';
 import { FIELD_BROWSER_HEIGHT, FIELD_BROWSER_WIDTH } from '../toolbar/fields_browser/helpers';
 import * as i18n from './translations';
 import { AlertCount } from '../styles';
 
+const StatefulAlertStatusBulkActions = lazy(
+  () => import('../toolbar/bulk_actions/alert_status_bulk_actions')
+);
+
 interface OwnProps {
   activePage: number;
   additionalControls?: React.ReactNode;
@@ -258,32 +270,37 @@ export const BodyComponent = React.memo<StatefulBodyProps>(
 
     const toolbarVisibility: EuiDataGridToolBarVisibilityOptions = useMemo(
       () => ({
-        additionalControls: showBulkActions ? (
-          <>
-            <AlertCount>{subtitle}</AlertCount>
-            <StatefulAlertStatusBulkActions
-              data-test-subj="bulk-actions"
-              id={id}
-              totalItems={totalItems}
-              filterStatus={filterStatus}
-              onActionSuccess={onAlertStatusActionSuccess}
-              onActionFailure={onAlertStatusActionFailure}
-              refetch={refetch}
-            />
-            {additionalControls ?? null}
-          </>
-        ) : (
+        additionalControls: (
           <>
             <AlertCount>{subtitle}</AlertCount>
-            {additionalControls ?? null}
-            <StatefulFieldsBrowser
-              data-test-subj="field-browser"
-              height={FIELD_BROWSER_HEIGHT}
-              width={FIELD_BROWSER_WIDTH}
-              browserFields={browserFields}
-              timelineId={id}
-              columnHeaders={columnHeaders}
-            />
+            {showBulkActions ? (
+              <>
+                <Suspense fallback={<EuiLoadingSpinner />}>
+                  <StatefulAlertStatusBulkActions
+                    data-test-subj="bulk-actions"
+                    id={id}
+                    totalItems={totalItems}
+                    filterStatus={filterStatus}
+                    onActionSuccess={onAlertStatusActionSuccess}
+                    onActionFailure={onAlertStatusActionFailure}
+                    refetch={refetch}
+                  />
+                </Suspense>
+                {additionalControls ?? null}
+              </>
+            ) : (
+              <>
+                {additionalControls ?? null}
+                <StatefulFieldsBrowser
+                  data-test-subj="field-browser"
+                  height={FIELD_BROWSER_HEIGHT}
+                  width={FIELD_BROWSER_WIDTH}
+                  browserFields={browserFields}
+                  timelineId={id}
+                  columnHeaders={columnHeaders}
+                />
+              </>
+            )}
           </>
         ),
         ...(showBulkActions

diff --git a/...ins/timelines/public/components/t_grid/toolbar/bulk_actions/alert_status_bulk_actions.tsx b/...ins/timelines/public/components/t_grid/toolbar/bulk_actions/alert_status_bulk_actions.tsx
@@ -193,3 +193,5 @@ const connector = connect(makeMapStateToProps, mapDispatchToProps);
 type PropsFromRedux = ConnectedProps<typeof connector>;
 
 export const StatefulAlertStatusBulkActions = connector(AlertStatusBulkActionsComponent);
+
+export { StatefulAlertStatusBulkActions as default };
diff --git a/x-pack/plugins/timelines/public/index.ts b/x-pack/plugins/timelines/public/index.ts
@@ -52,7 +52,6 @@ export {
   getTimelineIdFromColumnDroppableId,
 } from './components/drag_and_drop/helpers';
 export { StatefulFieldsBrowser } from './components/t_grid/toolbar/fields_browser';
-export { BulkActions } from './components/t_grid/toolbar/bulk_actions';
 
 // This exports static code and TypeScript types,
 // as well as, Kibana Platform `plugin()` initializer.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -193,3 +193,5 @@ const connector = connect(makeMapStateToProps, mapDispatchToProps);
		type PropsFromRedux = ConnectedProps<typeof connector>;

		export const StatefulAlertStatusBulkActions = connector(AlertStatusBulkActionsComponent);

		export { StatefulAlertStatusBulkActions as default };