Lazily load settings to reduce chunk size

This commit is contained in:
James Brunton 2025-12-18 14:14:33 +00:00
parent f44346a569
commit c6762532e5
2 changed files with 15 additions and 9 deletions

View File

@ -1,4 +1,4 @@
import React, { useState, useRef, forwardRef, useEffect } from "react";
import React, { useState, useRef, forwardRef, useEffect, lazy, Suspense } from "react";
import { Stack, Divider, Menu, Indicator } from "@mantine/core";
import { useTranslation } from 'react-i18next';
import { useNavigate, useLocation } from 'react-router-dom';
@ -14,8 +14,10 @@ import '@app/components/shared/quickAccessBar/QuickAccessBar.css';
import { Tooltip } from '@app/components/shared/Tooltip';
import AllToolsNavButton from '@app/components/shared/AllToolsNavButton';
import ActiveToolButton from "@app/components/shared/quickAccessBar/ActiveToolButton";
import AppConfigModal from '@app/components/shared/AppConfigModal';
import { useAppConfig } from '@app/contexts/AppConfigContext';
// Lazy-load AppConfigModal
const AppConfigModal = lazy(() => import('@app/components/shared/AppConfigModal'));
import { useLicenseAlert } from "@app/hooks/useLicenseAlert";
import { requestStartTour } from '@app/constants/events';
import QuickAccessButton from '@app/components/shared/quickAccessBar/QuickAccessButton';
@ -365,10 +367,12 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
</div>
</div>
<AppConfigModal
opened={configModalOpen}
onClose={() => setConfigModalOpen(false)}
/>
<Suspense fallback={null}>
<AppConfigModal
opened={configModalOpen}
onClose={() => setConfigModalOpen(false)}
/>
</Suspense>
</div>
);
});

View File

@ -1,8 +1,10 @@
import React from 'react';
import React, { lazy } from 'react';
import { useTranslation } from 'react-i18next';
import { NavKey } from '@app/components/shared/config/types';
import HotkeysSection from '@app/components/shared/config/configSections/HotkeysSection';
import GeneralSection from '@app/components/shared/config/configSections/GeneralSection';
// Lazy load config sections
const HotkeysSection = lazy(() => import('@app/components/shared/config/configSections/HotkeysSection'));
const GeneralSection = lazy(() => import('@app/components/shared/config/configSections/GeneralSection'));
export interface ConfigNavItem {
key: NavKey;