From 49d1c51359b90fda8822e19da5e2ccbf0968be97 Mon Sep 17 00:00:00 2001
From: ananzh <ananzh@amazon.com>
Date: Wed, 28 Jun 2023 23:11:45 +0000
Subject: [PATCH] [Data Explorer] Add lazy loading to enable all the services
 for canvas

Signed-off-by: ananzh <ananzh@amazon.com>
---
 .../data_explorer/public/components/app.tsx      |  2 +-
 .../view_components/canvas/create_canvas.tsx     |  9 ++++++++-
 .../view_components/canvas/discover_canvas.tsx   | 16 ++++++++++++++++
 3 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 src/plugins/discover/public/application/view_components/canvas/discover_canvas.tsx

diff --git a/src/plugins/data_explorer/public/components/app.tsx b/src/plugins/data_explorer/public/components/app.tsx
index 55544844b22e..36893fa1123b 100644
--- a/src/plugins/data_explorer/public/components/app.tsx
+++ b/src/plugins/data_explorer/public/components/app.tsx
@@ -35,7 +35,7 @@ export const DataExplorerApp = ({ basename, history }: DataExplorerAppDeps) => {
       restrictWidth={false}
       paddingSize="none"
     >
-      {view.ui.canvas}
+      <React.Suspense fallback={<div>Loading...</div>}>{view.ui.canvas}</React.Suspense>
     </EuiPageTemplate>
   );
 };
diff --git a/src/plugins/discover/public/application/view_components/canvas/create_canvas.tsx b/src/plugins/discover/public/application/view_components/canvas/create_canvas.tsx
index b223b336e44c..20084797a2fd 100644
--- a/src/plugins/discover/public/application/view_components/canvas/create_canvas.tsx
+++ b/src/plugins/discover/public/application/view_components/canvas/create_canvas.tsx
@@ -4,7 +4,14 @@
  */
 
 import React from 'react';
+import { DiscoverCanvas } from './discover_canvas';
 
 export const createCanvas = () => {
-  return <div>Test Canvas</div>;
+  const LazyDiscoverCanvas = React.lazy(DiscoverCanvas);
+
+  return (
+    <React.Suspense fallback={<div>Loading...</div>}>
+      <LazyDiscoverCanvas />
+    </React.Suspense>
+  );
 };
diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_canvas.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_canvas.tsx
new file mode 100644
index 000000000000..cff7c4872b3f
--- /dev/null
+++ b/src/plugins/discover/public/application/view_components/canvas/discover_canvas.tsx
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { getServices } from '../../../opensearch_dashboards_services';
+
+export const DiscoverCanvas = async () => {
+  const services = await getServices();
+
+  if (!services) {
+    return { default: () => <div>Test Canvas</div> };
+  }
+  return { default: () => <div>Test Canvas has services</div> };
+};