lazy load index documents component

elastic · Dec 20, 2023 · d9ac99c · d9ac99c
1 parent 9b3caf5
commit d9ac99c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/x-pack/plugins/serverless_search/public/application/components/index_documents/documents.tsx b/x-pack/plugins/serverless_search/public/application/components/index_documents/documents.tsx
@@ -74,3 +74,7 @@ export const IndexDocuments: React.FC<IndexDocumentsProps> = ({ indexName }) =>
     />
   );
 };
+
+// Default Export is needed to lazy load this react component
+// eslint-disable-next-line import/no-default-export
+export default IndexDocuments;
diff --git a/...plugins/serverless_search/public/application/components/index_documents/documents_tab.tsx b/...plugins/serverless_search/public/application/components/index_documents/documents_tab.tsx
@@ -6,14 +6,17 @@
  */
 
 import { IndexDetailsTab } from '@kbn/index-management-plugin/common/constants';
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
+import { EuiLoadingSpinner } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { CoreStart } from '@kbn/core-lifecycle-browser';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+
 import { ServerlessSearchPluginStartDependencies } from '../../../types';
-import { IndexDocuments } from './documents';
+
+const IndexDocuments = lazy(() => import('./documents'));
 
 export const createIndexDocumentsContent = (
   core: CoreStart,
@@ -34,7 +37,9 @@ export const createIndexDocumentsContent = (
         <KibanaContextProvider services={{ ...core, ...services }}>
           <QueryClientProvider client={queryClient}>
             <ReactQueryDevtools initialIsOpen={false} />
-            <IndexDocuments indexName={index.name} />
+            <Suspense fallback={<EuiLoadingSpinner />}>
+              <IndexDocuments indexName={index.name} />
+            </Suspense>
           </QueryClientProvider>
         </KibanaContextProvider>
       );