Panel Inspect: use monaco for json display (#25251)

packages/grafana-ui/src/components/Monaco/CodeEditorLazy.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useAsyncDependency } from '../../utils/useAsyncDependency';
+import { ErrorWithStack, LoadingPlaceholder } from '..';
+import { CodeEditorProps } from './CodeEditor';
+
+export type CodeEditorChangeHandler = (value: string) => void;
+
+export const CodeEditor: React.FC<CodeEditorProps> = props => {
+  const { loading, error, dependency } = useAsyncDependency(
+    import(/* webpackChunkName: "code-editor" */ './CodeEditor')
+  );
+
+  if (loading) {
+    return <LoadingPlaceholder text={'Loading...'} />;
+  }
+
+  if (error) {
+    return (
+      <ErrorWithStack
+        title="Code editor failed to load"
+        error={error}
+        errorInfo={{ componentStack: error?.stack || '' }}
+      />
+    );
+  }
+
+  const CodeEditor = dependency.default;
+  return <CodeEditor {...props} />;
+};