lazy load tab contents

x-pack/plugins/file_data_visualizer/public/lazy_load_bundle/component_wrapper.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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, { FC, useState, useEffect } from 'react';
+
+export const FileDataVisualizerWrapper: FC = () => {
+  const [FileDataVisualizerComponent, setFileDataVisualizerComponent] = useState<FC<{}> | null>(
+    null
+  );
+
+  useEffect(() => {
+    if (FileDataVisualizerComponent === null) {
+      import('../application/file_datavisualizer').then(({ FileDataVisualizer }) => {
+        setFileDataVisualizerComponent(FileDataVisualizer);
+      });
+    }
+  }, [FileDataVisualizerComponent]);
+
+  return <>{FileDataVisualizerComponent}</>;
+};

x-pack/plugins/file_data_visualizer/public/register_home.ts

@@ -7,14 +7,14 @@
 
 import { i18n } from '@kbn/i18n';
 import type { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
-import { FileDataVisualizer } from './application/file_datavisualizer';
+import { FileDataVisualizerWrapper } from './lazy_load_bundle/component_wrapper';
 
 export function registerHomeAddData(home: HomePublicPluginSetup) {
   home.addData.registerAddDataTab({
     id: 'fileDataViz',
     name: i18n.translate('xpack.fileDataVisualizer.embeddedTabTitle', {
       defaultMessage: 'Upload file',
     }),
-    component: FileDataVisualizer,
+    component: FileDataVisualizerWrapper,
   });
 }