chore(QT): QueryEditor Lazy loading [YTFRONT-3814]

ytsaurus · Nov 10, 2023 · 115835a · 115835a
1 parent 7796f60
commit 115835a
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 10 deletions.
diff --git a/packages/ui/src/ui/containers/AppNavigation/TopRowContent/TopRowContent.tsx b/packages/ui/src/ui/containers/AppNavigation/TopRowContent/TopRowContent.tsx
@@ -17,10 +17,14 @@ import SystemTopRowContent from '../../../pages/system/System/SystemTopRowConten
 import DashboardTopRowContent from '../../../pages/dashboard/Dashboard/DashboardTopRowContent';
 import ComponentsTopRowContent from '../../../pages/components/Components/ComponentsTopRowContent';
 import {makeExtraPageTopRowRoutes} from '../../../containers/ClusterPage/ExtraClusterPageRoutes';
-import {QueryTrackerTopRow} from '../../../pages/query-tracker/QueryTrackerTopRow';
 
 import {odinPageInfo} from '../../../pages/odin';
 import {hasOdinPage} from '../../../config';
+import withLazyLoading from '../../../hocs/withLazyLoading';
+
+const QueryTrackerTopRowLazy = React.lazy(
+    () => import('../../../pages/query-tracker/QueryTrackerTopRow'),
+);
 
 export default function TopRowContent() {
     const loadState = useSelector(getGlobalLoadState);
@@ -45,7 +49,10 @@ export default function TopRowContent() {
             <Route path={`/:cluster/${Page.DASHBOARD}`} component={DashboardTopRowContent} />
             <Route path={`/:cluster/${Page.COMPONENTS}`} component={ComponentsTopRowContent} />
             {(!adminPages.includes(Page.QUERIES) || isAdmin) && (
-                <Route path={`/:cluster/${Page.QUERIES}`} component={QueryTrackerTopRow} />
+                <Route
+                    path={`/:cluster/${Page.QUERIES}`}
+                    component={withLazyLoading(QueryTrackerTopRowLazy)}
+                />
             )}
             {hasOdinPage() && (
                 <Route

diff --git a/packages/ui/src/ui/hocs/withLazyLoading.tsx b/packages/ui/src/ui/hocs/withLazyLoading.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import {Loader} from '@gravity-ui/uikit';
+
+export default function withLazyLoading<P>(Component: React.ComponentType<P>) {
+    return function WithSuspense(props: P & React.JSX.IntrinsicAttributes) {
+        return (
+            <React.Suspense fallback={<Loader />}>
+                <Component {...props} />
+            </React.Suspense>
+        );
+    };
+}
diff --git a/packages/ui/src/ui/pages/navigation/content/Table/TableOverview/CreateQueryFromTable.tsx b/packages/ui/src/ui/pages/navigation/content/Table/TableOverview/CreateQueryFromTable.tsx
@@ -5,7 +5,8 @@ import {Button} from '@gravity-ui/uikit';
 import {QueryEngine} from '../../../../query-tracker/module/api';
 import {getPath} from '../../../../../store/selectors/navigation';
 import {getCluster} from '../../../../../store/selectors/global';
-import {QueryWidget, QueryWidgetProps} from '../../../../query-tracker/QueryWidget';
+import type {QueryWidgetProps} from '../../../../query-tracker/QueryWidget';
+import withLazyLoading from '../../../../../hocs/withLazyLoading';
 import {createQueryFromTablePath} from '../../../../query-tracker/module/query/actions';
 import Icon from '../../../../../components/Icon/Icon';
 import {createNewQueryUrl} from '../../../../query-tracker/utils/navigation';
@@ -16,8 +17,10 @@ import './CreateQueryFromTable.scss';
 
 const b = cn('create-query-btn');
 
+const QueryWidgetLazy = React.lazy(() => import('../../../../query-tracker/QueryWidget'));
+
 export const QueryWidgetPortal = withSplit(
-    QueryWidget,
+    withLazyLoading<QueryWidgetProps>(QueryWidgetLazy),
 ) as unknown as ReactElement<QueryWidgetProps>;
 
 export function CreateQueryFromTable({className}: {className: string}) {

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryEditor/QueryEditor.tsx b/packages/ui/src/ui/pages/query-tracker/QueryEditor/QueryEditor.tsx
@@ -190,7 +190,11 @@ const ResultView = React.memo(function ResultView({
 });
 
 type ResultMode = 'full' | 'minimized' | 'split';
-export function QueryEditor({onStartQuery}: {onStartQuery?: (queryId: string) => boolean | void}) {
+export default function QueryEditor({
+    onStartQuery,
+}: {
+    onStartQuery?: (queryId: string) => boolean | void;
+}) {
     const query = useCurrentQuery();
 
     const [resultViewMode, setResultViewMode] = useState<ResultMode>('minimized');

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryTracker/QueryTracker.tsx b/packages/ui/src/ui/pages/query-tracker/QueryTracker/QueryTracker.tsx
@@ -13,7 +13,7 @@ import {
 } from '../module/query/actions';
 import {getQueryGetParams} from '../module/query/selectors';
 import {QueriesList} from '../QueriesList';
-import {QueryEditor} from '../QueryEditor/QueryEditor';
+import {Loader} from '@gravity-ui/uikit';
 import './QueryTracker.scss';
 
 type Props = {
@@ -28,6 +28,8 @@ type Props = {
     };
 };
 
+const QueryEditorLazy = React.lazy(() => import('../QueryEditor/QueryEditor'));
+
 const initialSizes = [23, 77];
 const minSize = 380; // see history list's cells size
 
@@ -113,7 +115,9 @@ export const QueryTracker = ({match}: Props) => {
                 >
                     <QueriesList />
 
-                    <QueryEditor onStartQuery={goToCreatedQuery}></QueryEditor>
+                    <React.Suspense fallback={<Loader />}>
+                        <QueryEditorLazy onStartQuery={goToCreatedQuery}></QueryEditorLazy>
+                    </React.Suspense>
                 </FlexSplitPane>
             </QueriesPooling>
         </>

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryTrackerTopRow/index.tsx b/packages/ui/src/ui/pages/query-tracker/QueryTrackerTopRow/index.tsx
@@ -26,7 +26,7 @@ export function QueryHeader() {
     );
 }
 
-export function QueryTrackerTopRow() {
+export default function QueryTrackerTopRow() {
     return (
         <RowWithName page={Page.QUERIES}>
             <QueryHeader />

diff --git a/packages/ui/src/ui/pages/query-tracker/QueryWidget/index.tsx b/packages/ui/src/ui/pages/query-tracker/QueryWidget/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
-import {QueryEditor} from '../QueryEditor/QueryEditor';
+import QueryEditor from '../QueryEditor/QueryEditor';
 import {QueryMetaForm} from '../QueryTrackerTopRow/QueryMetaForm/QueryMetaForm';
 import Icon from '../../../components/Icon/Icon';
 import {useSelector} from 'react-redux';
@@ -15,7 +15,7 @@ const block = cn('query-widget');
 
 export type QueryWidgetProps = {onClose: () => void};
 
-export function QueryWidget({onClose}: QueryWidgetProps) {
+export default function QueryWidget({onClose}: QueryWidgetProps) {
     const cluster = useSelector(getCluster);
     const path = useSelector(getPath);
     return (