From 79a5440f69994db676bf9fbe273800c164c9b54b Mon Sep 17 00:00:00 2001
From: James Gowdy <jgowdy@elastic.co>
Date: Tue, 1 Jun 2021 17:31:56 +0100
Subject: [PATCH] lazy load tab contents

---
 .../lazy_load_bundle/component_wrapper.tsx    | 24 +++++++++++++++++++
 .../public/register_home.ts                   |  4 ++--
 2 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 x-pack/plugins/file_data_visualizer/public/lazy_load_bundle/component_wrapper.tsx

diff --git a/x-pack/plugins/file_data_visualizer/public/lazy_load_bundle/component_wrapper.tsx b/x-pack/plugins/file_data_visualizer/public/lazy_load_bundle/component_wrapper.tsx
new file mode 100644
index 00000000000000..20e4821e6b1f08
--- /dev/null
+++ b/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}</>;
+};
diff --git a/x-pack/plugins/file_data_visualizer/public/register_home.ts b/x-pack/plugins/file_data_visualizer/public/register_home.ts
index c50671f9d4bd72..e54c37a8d06bc0 100644
--- a/x-pack/plugins/file_data_visualizer/public/register_home.ts
+++ b/x-pack/plugins/file_data_visualizer/public/register_home.ts
@@ -7,7 +7,7 @@
 
 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({
@@ -15,6 +15,6 @@ export function registerHomeAddData(home: HomePublicPluginSetup) {
     name: i18n.translate('xpack.fileDataVisualizer.embeddedTabTitle', {
       defaultMessage: 'Upload file',
     }),
-    component: FileDataVisualizer,
+    component: FileDataVisualizerWrapper,
   });
 }