add more dynamic imports to optimize bundle

src/renderer/features/player/components/mobile-fullscreen-player-progress.tsx

@@ -1,16 +1,22 @@
 import formatDuration from 'format-duration';
-import { memo } from 'react';
+import { lazy, memo, Suspense } from 'react';
 
 import styles from './mobile-fullscreen-player.module.css';
 
 import { PlayerbarSeekSlider } from '/@/renderer/features/player/components/playerbar-seek-slider';
-import { PlayerbarWaveform } from '/@/renderer/features/player/components/playerbar-waveform';
 import { usePlayerTimestamp } from '/@/renderer/store';
 import { PlayerbarSliderType, usePlayerbarSlider } from '/@/renderer/store/settings.store';
+import { Spinner } from '/@/shared/components/spinner/spinner';
 import { Text } from '/@/shared/components/text/text';
 import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
 import { QueueSong } from '/@/shared/types/domain-types';
 
+const PlayerbarWaveform = lazy(() =>
+    import('/@/renderer/features/player/components/playerbar-waveform').then((module) => ({
+        default: module.PlayerbarWaveform,
+    })),
+);
+
 interface MobileFullscreenPlayerProgressProps {
     currentSong?: QueueSong;
 }
@@ -38,7 +44,9 @@ export const MobileFullscreenPlayerProgress = memo(
                 </div>
                 <div className={styles.sliderWrapper}>
                     {isWaveform ? (
-                        <PlayerbarWaveform />
+                        <Suspense fallback={<Spinner />}>
+                            <PlayerbarWaveform />
+                        </Suspense>
                     ) : (
                         <PlayerbarSeekSlider max={songDuration} min={0} />
                     )}

src/renderer/features/player/components/playerbar-slider.tsx

@@ -1,8 +1,8 @@
 import formatDuration from 'format-duration';
+import { lazy, Suspense } from 'react';
 
 import { PlayerbarSeekSlider } from './playerbar-seek-slider';
 import styles from './playerbar-slider.module.css';
-import { PlayerbarWaveform } from './playerbar-waveform';
 
 import { useRemote } from '/@/renderer/features/remote/hooks/use-remote';
 import {
@@ -13,9 +13,16 @@ import {
 } from '/@/renderer/store';
 import { PlayerbarSliderType, usePlayerbarSlider } from '/@/renderer/store/settings.store';
 import { Slider, SliderProps } from '/@/shared/components/slider/slider';
+import { Spinner } from '/@/shared/components/spinner/spinner';
 import { Text } from '/@/shared/components/text/text';
 import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
 
+const PlayerbarWaveform = lazy(() =>
+    import('./playerbar-waveform').then((module) => ({
+        default: module.PlayerbarWaveform,
+    })),
+);
+
 export const PlayerbarSlider = () => {
     const currentSong = usePlayerSong();
     const playerbarSlider = usePlayerbarSlider();
@@ -51,7 +58,9 @@ export const PlayerbarSlider = () => {
                 </div>
                 <div className={styles.sliderWrapper}>
                     {isWaveform ? (
-                        <PlayerbarWaveform />
+                        <Suspense fallback={<Spinner />}>
+                            <PlayerbarWaveform />
+                        </Suspense>
                     ) : (
                         <PlayerbarSeekSlider max={songDuration} min={0} />
                     )}

src/renderer/features/player/components/playerbar.tsx

@@ -1,13 +1,19 @@
 import clsx from 'clsx';
-import { MouseEvent } from 'react';
+import { lazy, MouseEvent, Suspense } from 'react';
 
 import styles from './playerbar.module.css';
 
 import { CenterControls } from '/@/renderer/features/player/components/center-controls';
 import { LeftControls } from '/@/renderer/features/player/components/left-controls';
-import { MobilePlayerbar } from '/@/renderer/features/player/components/mobile-playerbar';
 import { RightControls } from '/@/renderer/features/player/components/right-controls';
 import { useIsMobile } from '/@/renderer/hooks/use-is-mobile';
+import { Spinner } from '/@/shared/components/spinner/spinner';
+
+const MobilePlayerbar = lazy(() =>
+    import('./mobile-playerbar').then((module) => ({
+        default: module.MobilePlayerbar,
+    })),
+);
 import { useFullScreenPlayerStore, useSetFullScreenPlayerStore } from '/@/renderer/store';
 import { usePlayerbarOpenDrawer } from '/@/renderer/store';
 import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
@@ -24,7 +30,11 @@ export const Playerbar = () => {
     };
 
     if (isMobile) {
-        return <MobilePlayerbar />;
+        return (
+            <Suspense fallback={<Spinner />}>
+                <MobilePlayerbar />
+            </Suspense>
+        );
     }
 
     return (