diff --git a/packages/grafana-sql/src/components/visual-query-builder/SQLWhereRow.tsx b/packages/grafana-sql/src/components/visual-query-builder/SQLWhereRow.tsx
index 8a77663398f..206646ba17d 100644
--- a/packages/grafana-sql/src/components/visual-query-builder/SQLWhereRow.tsx
+++ b/packages/grafana-sql/src/components/visual-query-builder/SQLWhereRow.tsx
@@ -1,3 +1,4 @@
+import React, { Suspense } from 'react';
 import { useAsync } from 'react-use';
 
 import { SelectableValue, TypedVariableModel } from '@grafana/data';
@@ -7,8 +8,9 @@ import { QueryWithDefaults } from '../../defaults';
 import { DB, SQLExpression, SQLQuery, SQLSelectableValue } from '../../types';
 import { useSqlChange } from '../../utils/useSqlChange';
 
-import { Config } from './AwesomeQueryBuilder';
-import { WhereRow } from './WhereRow';
+import type { Config } from './AwesomeQueryBuilder';
+
+const LazyWhereRow = React.lazy(() => import(/* webpackChunkName: "sql-editor-where-row" */ './WhereRow'));
 
 interface WhereRowProps {
   query: QueryWithDefaults;
@@ -25,19 +27,21 @@ export function SQLWhereRow({ query, fields, onQueryChange, db }: WhereRowProps)
   const { onSqlChange } = useSqlChange({ query, onQueryChange, db });
 
   return (
-    <WhereRow
-      // TODO: fix key that's used to force clean render or SQLWhereRow - otherwise it doesn't render operators correctly
-      key={JSON.stringify(state.value)}
-      config={{ fields: state.value || {} }}
-      sql={query.sql!}
-      onSqlChange={(val: SQLExpression) => {
-        const templateVars = getTemplateSrv().getVariables();
+    <Suspense>
+      <LazyWhereRow
+        // TODO: fix key that's used to force clean render or SQLWhereRow - otherwise it doesn't render operators correctly
+        key={JSON.stringify(state.value)}
+        config={{ fields: state.value || {} }}
+        sql={query.sql!}
+        onSqlChange={(val: SQLExpression) => {
+          const templateVars = getTemplateSrv().getVariables();
 
-        removeQuotesForMultiVariables(val, templateVars);
+          removeQuotesForMultiVariables(val, templateVars);
 
-        onSqlChange(val);
-      }}
-    />
+          onSqlChange(val);
+        }}
+      />
+    </Suspense>
   );
 }
 
diff --git a/packages/grafana-sql/src/components/visual-query-builder/WhereRow.tsx b/packages/grafana-sql/src/components/visual-query-builder/WhereRow.tsx
index 0fb0cd19381..6bb15981b22 100644
--- a/packages/grafana-sql/src/components/visual-query-builder/WhereRow.tsx
+++ b/packages/grafana-sql/src/components/visual-query-builder/WhereRow.tsx
@@ -90,3 +90,5 @@ injectGlobal`
     display: none;
   }
 `;
+
+export default WhereRow;
diff --git a/packages/grafana-sql/src/types.ts b/packages/grafana-sql/src/types.ts
index 00c1a6e0456..d96fd854cff 100644
--- a/packages/grafana-sql/src/types.ts
+++ b/packages/grafana-sql/src/types.ts
@@ -1,4 +1,4 @@
-import { JsonTree } from '@react-awesome-query-builder/ui';
+import type { JsonTree } from '@react-awesome-query-builder/ui';
 
 import {
   DataFrame,
diff --git a/public/app/core/components/OptionsUI/registry.tsx b/public/app/core/components/OptionsUI/registry.tsx
index ebdb3e97289..46b826c6eca 100644
--- a/public/app/core/components/OptionsUI/registry.tsx
+++ b/public/app/core/components/OptionsUI/registry.tsx
@@ -1,4 +1,4 @@
-import { BooleanFieldSettings } from '@react-awesome-query-builder/ui';
+import type { BooleanFieldSettings } from '@react-awesome-query-builder/ui';
 
 import {
   FieldConfigPropertyItem,