From e45218a40a8042d1bce9c3391305ba2c5d0a68ca Mon Sep 17 00:00:00 2001 From: Konstantin Shishov Date: Fri, 10 Nov 2023 12:31:42 +0300 Subject: [PATCH] chore(QT): QueryEditor Lazy loading [YTFRONT-3814] --- .../AppNavigation/TopRowContent/TopRowContent.tsx | 11 +++++++++-- packages/ui/src/ui/hocs/withLazyLoading.tsx | 12 ++++++++++++ .../Table/TableOverview/CreateQueryFromTable.tsx | 7 +++++-- .../pages/query-tracker/QueryEditor/QueryEditor.tsx | 6 +++++- .../query-tracker/QueryTracker/QueryTracker.tsx | 8 ++++++-- .../pages/query-tracker/QueryTrackerTopRow/index.tsx | 2 +- .../src/ui/pages/query-tracker/QueryWidget/index.tsx | 4 ++-- 7 files changed, 40 insertions(+), 10 deletions(-) create mode 100644 packages/ui/src/ui/hocs/withLazyLoading.tsx diff --git a/packages/ui/src/ui/containers/AppNavigation/TopRowContent/TopRowContent.tsx b/packages/ui/src/ui/containers/AppNavigation/TopRowContent/TopRowContent.tsx index 8b59b83fe..6978794c4 100644 --- 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() { {(!adminPages.includes(Page.QUERIES) || isAdmin) && ( - + )} {hasOdinPage() && ( (Component: React.ComponentType

) { + return function WithSuspense(props: P & React.JSX.IntrinsicAttributes) { + return ( + }> + + + ); + }; +} 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 index aa737f1b4..03fda17dc 100644 --- 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(QueryWidgetLazy), ) as unknown as ReactElement; 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 index 04f03b600..9b5213f04 100644 --- 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('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 index 8ac74b541..06c27aa44 100644 --- 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) => { > - + }> + + diff --git a/packages/ui/src/ui/pages/query-tracker/QueryTrackerTopRow/index.tsx b/packages/ui/src/ui/pages/query-tracker/QueryTrackerTopRow/index.tsx index 956c3e3fa..a93edcf27 100644 --- 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 ( diff --git a/packages/ui/src/ui/pages/query-tracker/QueryWidget/index.tsx b/packages/ui/src/ui/pages/query-tracker/QueryWidget/index.tsx index a2678de24..2a0f4ca1f 100644 --- 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 (