[Data Explorer] Add lazy loading to enable all the services for canvas

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

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