From b3cbfdeb8901bb20df3c07bb307101403a27601d Mon Sep 17 00:00:00 2001
From: ananzh <ananzh@amazon.com>
Date: Wed, 28 Jun 2023 23:11:45 +0000
Subject: [PATCH] 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     | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

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..7d3ec6ac4a96 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,21 @@
  */
 
 import React from 'react';
+import { getServices } from '../../../opensearch_dashboards_services';
 
 export const createCanvas = () => {
-  return <div>Test Canvas</div>;
+  const CanvasComponent = React.lazy(async () => {
+    const services = await getServices();
+
+    if (!services) {
+      return { default: () => <div>Test Canvas</div> };
+    }
+    return { default: () => <div>Test Canvas has services</div> };
+  });
+
+  return (
+    <React.Suspense fallback={<div>Loading...</div>}>
+      <CanvasComponent />
+    </React.Suspense>
+  );
 };