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

packages/grafana-sql/src/datasource/SqlDatasource.ts

@@ -30,7 +30,7 @@ import {
 } from '@grafana/runtime';
 
 import { ResponseParser } from '../ResponseParser';
-import { SqlQueryEditor } from '../components/QueryEditor';
+import { SqlQueryEditorLazy } from '../components/QueryEditorLazy';
 import { MACRO_NAMES } from '../constants';
 import { DB, SQLQuery, SQLOptions, SqlQueryModel, QueryFormat } from '../types';
 import migrateAnnotation from '../utils/migration';
@@ -63,7 +63,7 @@ export abstract class SqlDatasource extends DataSourceWithBackend<SQLQuery, SQLO
     this.preconfiguredDatabase = settingsData.database ?? '';
     this.annotations = {
       prepareAnnotation: migrateAnnotation,
-      QueryEditor: SqlQueryEditor,
+      QueryEditor: SqlQueryEditorLazy,
     };
   }
 

packages/grafana-sql/src/index.ts

@@ -17,7 +17,7 @@ export { ConnectionLimits } from './components/configuration/ConnectionLimits';
 export { Divider } from './components/configuration/Divider';
 export { TLSSecretsConfig } from './components/configuration/TLSSecretsConfig';
 export { useMigrateDatabaseFields } from './components/configuration/useMigrateDatabaseFields';
-export { SqlQueryEditor } from './components/QueryEditor';
+export { SqlQueryEditorLazy } from './components/QueryEditorLazy';
 export type { QueryHeaderProps } from './components/QueryHeader';
 export { createSelectClause, haveColumns } from './utils/sql.utils';
 export { applyQueryDefaults } from './defaults';