add more dynamic imports to optimize bundle

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 (