add lazy loading to enable all the services for canvas

Signed-off-by: ananzh <[email protected]>

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>
   );
 };

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>
+  );
 };