Lazily load config sections to reduce chunk size

This commit is contained in:
James Brunton 2025-12-18 11:51:25 +00:00
parent 9baad91fad
commit 40b49cc96e
2 changed files with 24 additions and 20 deletions

View File

@ -1,4 +1,4 @@
import React, { useMemo, useState, useEffect, useCallback } from 'react';
import React, { useMemo, useState, useEffect, useCallback, Suspense } from 'react';
import { Modal, Text, ActionIcon, Tooltip, Group } from '@mantine/core';
import { useNavigate, useLocation } from 'react-router-dom';
import LocalIcon from '@app/components/shared/LocalIcon';
@ -223,7 +223,9 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose })
</ActionIcon>
</div>
<div className="modal-body">
{activeComponent}
<Suspense fallback={<div style={{ padding: '2rem', textAlign: 'center' }}>Loading...</div>}>
{activeComponent}
</Suspense>
</div>
</div>
</div>

View File

@ -1,23 +1,25 @@
import React from 'react';
import React, { lazy } from 'react';
import { useTranslation } from 'react-i18next';
import { useConfigNavSections as useCoreConfigNavSections, createConfigNavSections as createCoreConfigNavSections, ConfigNavSection } from '@core/components/shared/config/configNavSections';
import PeopleSection from '@app/components/shared/config/configSections/PeopleSection';
import TeamsSection from '@app/components/shared/config/configSections/TeamsSection';
import AdminGeneralSection from '@app/components/shared/config/configSections/AdminGeneralSection';
import AdminSecuritySection from '@app/components/shared/config/configSections/AdminSecuritySection';
import AdminConnectionsSection from '@app/components/shared/config/configSections/AdminConnectionsSection';
import AdminPrivacySection from '@app/components/shared/config/configSections/AdminPrivacySection';
import AdminDatabaseSection from '@app/components/shared/config/configSections/AdminDatabaseSection';
import AdminAdvancedSection from '@app/components/shared/config/configSections/AdminAdvancedSection';
import AdminLegalSection from '@app/components/shared/config/configSections/AdminLegalSection';
import AdminPlanSection from '@app/components/shared/config/configSections/AdminPlanSection';
import AdminFeaturesSection from '@app/components/shared/config/configSections/AdminFeaturesSection';
import AdminEndpointsSection from '@app/components/shared/config/configSections/AdminEndpointsSection';
import AdminAuditSection from '@app/components/shared/config/configSections/AdminAuditSection';
import AdminUsageSection from '@app/components/shared/config/configSections/AdminUsageSection';
import ApiKeys from '@app/components/shared/config/configSections/ApiKeys';
import AccountSection from '@app/components/shared/config/configSections/AccountSection';
import GeneralSection from '@app/components/shared/config/configSections/GeneralSection';
// Lazy load all config sections
const PeopleSection = lazy(() => import('@app/components/shared/config/configSections/PeopleSection'));
const TeamsSection = lazy(() => import('@app/components/shared/config/configSections/TeamsSection'));
const AdminGeneralSection = lazy(() => import('@app/components/shared/config/configSections/AdminGeneralSection'));
const AdminSecuritySection = lazy(() => import('@app/components/shared/config/configSections/AdminSecuritySection'));
const AdminConnectionsSection = lazy(() => import('@app/components/shared/config/configSections/AdminConnectionsSection'));
const AdminPrivacySection = lazy(() => import('@app/components/shared/config/configSections/AdminPrivacySection'));
const AdminDatabaseSection = lazy(() => import('@app/components/shared/config/configSections/AdminDatabaseSection'));
const AdminAdvancedSection = lazy(() => import('@app/components/shared/config/configSections/AdminAdvancedSection'));
const AdminLegalSection = lazy(() => import('@app/components/shared/config/configSections/AdminLegalSection'));
const AdminPlanSection = lazy(() => import('@app/components/shared/config/configSections/AdminPlanSection'));
const AdminFeaturesSection = lazy(() => import('@app/components/shared/config/configSections/AdminFeaturesSection'));
const AdminEndpointsSection = lazy(() => import('@app/components/shared/config/configSections/AdminEndpointsSection'));
const AdminAuditSection = lazy(() => import('@app/components/shared/config/configSections/AdminAuditSection'));
const AdminUsageSection = lazy(() => import('@app/components/shared/config/configSections/AdminUsageSection'));
const ApiKeys = lazy(() => import('@app/components/shared/config/configSections/ApiKeys'));
const AccountSection = lazy(() => import('@app/components/shared/config/configSections/AccountSection'));
const GeneralSection = lazy(() => import('@app/components/shared/config/configSections/GeneralSection'));
/**
* Hook version of proprietary config nav sections with proper i18n support