remove lazy load on settings modal

src/renderer/features/settings/components/settings-content.module.css

@@ -4,12 +4,3 @@
     padding: 1rem;
     overflow: hidden;
 }
-
-.spinner-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    padding-top: 5rem;
-    padding-bottom: 5rem;
-}

src/renderer/features/settings/components/settings-content.tsx

@@ -1,53 +1,17 @@
 import isElectron from 'is-electron';
-import { lazy, Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styles from './settings-content.module.css';
 
+import { AdvancedTab } from '/@/renderer/features/settings/components/advanced/advanced-tab';
+import { GeneralTab } from '/@/renderer/features/settings/components/general/general-tab';
+import { HotkeysTab } from '/@/renderer/features/settings/components/hotkeys/hotkeys-tab';
+import { PlaybackTab } from '/@/renderer/features/settings/components/playback/playback-tab';
+import { WindowTab } from '/@/renderer/features/settings/components/window/window-tab';
 import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store/settings.store';
-import { Box } from '/@/shared/components/box/box';
-import { Spinner } from '/@/shared/components/spinner/spinner';
 import { Tabs } from '/@/shared/components/tabs/tabs';
 
-const GeneralTab = lazy(() =>
-    import('/@/renderer/features/settings/components/general/general-tab').then((module) => ({
-        default: module.GeneralTab,
-    })),
-);
-
-const PlaybackTab = lazy(() =>
-    import('/@/renderer/features/settings/components/playback/playback-tab').then((module) => ({
-        default: module.PlaybackTab,
-    })),
-);
-
-const HotkeysTab = lazy(() =>
-    import('/@/renderer/features/settings/components/hotkeys/hotkeys-tab').then((module) => ({
-        default: module.HotkeysTab,
-    })),
-);
-
-const WindowTab = lazy(() =>
-    import('/@/renderer/features/settings/components/window/window-tab').then((module) => ({
-        default: module.WindowTab,
-    })),
-);
-
-const AdvancedTab = lazy(() =>
-    import('/@/renderer/features/settings/components/advanced/advanced-tab').then((module) => ({
-        default: module.AdvancedTab,
-    })),
-);
-
-const SuspenseSpinner = () => {
-    return (
-        <Box className={styles.spinnerContainer}>
-            <Spinner container />
-        </Box>
-    );
-};
-
 export const SettingsContent = () => {
     const { t } = useTranslation();
     const currentTab = useSettingsStore((state) => state.tab);
@@ -73,31 +37,21 @@ export const SettingsContent = () => {
                         <Tabs.Tab value="advanced">{t('page.setting.advanced')}</Tabs.Tab>
                     </Tabs.List>
                     <Tabs.Panel value="general">
-                        <Suspense fallback={<SuspenseSpinner />}>
+                        <GeneralTab />
-                            <GeneralTab />
-                        </Suspense>
                     </Tabs.Panel>
                     <Tabs.Panel value="playback">
-                        <Suspense fallback={<SuspenseSpinner />}>
+                        <PlaybackTab />
-                            <PlaybackTab />
-                        </Suspense>
                     </Tabs.Panel>
                     <Tabs.Panel value="hotkeys">
-                        <Suspense fallback={<SuspenseSpinner />}>
+                        <HotkeysTab />
-                            <HotkeysTab />
-                        </Suspense>
                     </Tabs.Panel>
                     {isElectron() && (
                         <Tabs.Panel value="window">
-                            <Suspense fallback={<SuspenseSpinner />}>
+                            <WindowTab />
-                                <WindowTab />
-                            </Suspense>
                         </Tabs.Panel>
                     )}
                     <Tabs.Panel value="advanced">
-                        <Suspense fallback={<SuspenseSpinner />}>
+                        <AdvancedTab />
-                            <AdvancedTab />
-                        </Suspense>
                     </Tabs.Panel>
                 </Tabs>
             </div>

src/renderer/router/app-router.tsx

@@ -2,6 +2,7 @@ import { lazy, Suspense } from 'react';
 import { HashRouter, Route, Routes } from 'react-router';
 
 import { ShuffleAllContextModal } from '/@/renderer/features/player/components/shuffle-all-modal';
+import { SettingsContextModal } from '/@/renderer/features/settings/components/settings-modal';
 import { RouterErrorBoundary } from '/@/renderer/features/shared/components/router-error-boundary';
 import { AuthenticationOutlet } from '/@/renderer/layouts/authentication-outlet';
 import { ResponsiveLayout } from '/@/renderer/layouts/responsive-layout';
@@ -137,18 +138,6 @@ const UpdatePlaylistContextModal = (props: any) => (
     </Suspense>
 );
 
-const LazySettingsContextModal = lazy(() =>
-    import('/@/renderer/features/settings/components/settings-modal').then((module) => ({
-        default: module.SettingsContextModal,
-    })),
-);
-
-const SettingsContextModal = (props: any) => (
-    <Suspense fallback={<Spinner container />}>
-        <LazySettingsContextModal {...props} />
-    </Suspense>
-);
-
 const LazyShareItemContextModal = lazy(() =>
     import('/@/renderer/features/sharing/components/share-item-context-modal').then((module) => ({
         default: module.ShareItemContextModal,