SQL Datasources: Make QueryEditor lazy loaded (#96179)

* feat(grafana-sql): make sqlqueryeditor lazy loaded

* feat(sql-datasources): switch out query editor for lazy query editor

* build(postgresql): put tsconfig jsx prop inside compilerOptions

* chore(sql-queryeditor): move lazy import out of component

packages/grafana-sql/src/components/QueryEditor.tsx

@@ -14,11 +14,11 @@ import { QueryHeader, QueryHeaderProps } from './QueryHeader';
 import { RawEditor } from './query-editor-raw/RawEditor';
 import { VisualEditor } from './visual-query-builder/VisualEditor';
 
-interface SqlQueryEditorProps extends QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions> {
+export interface SqlQueryEditorProps extends QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions> {
   queryHeaderProps?: Pick<QueryHeaderProps, 'dialect'>;
 }
 
-export function SqlQueryEditor({
+export default function SqlQueryEditor({
   datasource,
   query,
   onChange,

packages/grafana-sql/src/components/QueryEditorLazy.tsx

@@ -0,0 +1,27 @@
+import { css } from '@emotion/css';
+import { lazy, Suspense } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { LoadingPlaceholder, useStyles2 } from '@grafana/ui';
+
+import type { SqlQueryEditorProps } from './QueryEditor';
+const QueryEditor = lazy(() => import(/* webpackChunkName: "sql-query-editor" */ './QueryEditor'));
+
+export function SqlQueryEditorLazy(props: SqlQueryEditorProps) {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <Suspense fallback={<LoadingPlaceholder text={'Loading editor'} className={styles.container} />}>
+      <QueryEditor {...props} />
+    </Suspense>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    container: css({
+      marginBottom: 'unset',
+      marginLeft: theme.spacing(1),
+    }),
+  };
+};