reduced chunks size

frontend/src/App.tsx

@@ -1,23 +1,25 @@
 import { ThemeProvider } from '@emotion/react'
-import {
-  ChevronLeft,
-  Dashboard,
-  FormatListBulleted,
-  Menu,
-  SettingsEthernet,
-  Settings as SettingsIcon,
-  Storage
-} from '@mui/icons-material'
-import {
-  Box,
-  CircularProgress,
-  CssBaseline,
-  Divider,
-  IconButton, List,
-  ListItemIcon, ListItemText, Toolbar,
-  Typography,
-  createTheme
-} from '@mui/material'
+
+import ChevronLeft from '@mui/icons-material/ChevronLeft'
+import Dashboard from '@mui/icons-material/Dashboard'
+import FormatListBulleted from '@mui/icons-material/FormatListBulleted'
+import Menu from '@mui/icons-material/Menu'
+import SettingsIcon from '@mui/icons-material/Settings'
+import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
+import Storage from '@mui/icons-material/Storage'
+
+import { Box, createTheme } from '@mui/material'
+
+import CircularProgress from '@mui/material/CircularProgress'
+import CssBaseline from '@mui/material/CssBaseline'
+import Divider from '@mui/material/Divider'
+import IconButton from '@mui/material/IconButton'
+import List from '@mui/material/List'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
+
 import ListItemButton from '@mui/material/ListItemButton'
 import { grey } from '@mui/material/colors'
 import { Suspense, lazy, useMemo, useState } from 'react'
@@ -27,9 +29,8 @@ import {
   BrowserRouter as Router,
   Routes
 } from 'react-router-dom'
-import Home from './Home'
-import { AppBar } from './components/AppBar'
-import { Drawer } from './components/Drawer'
+import AppBar from './components/AppBar'
+import Drawer from './components/Drawer'
 import { toggleListView } from './features/settings/settingsSlice'
 import { RootState, store } from './stores/store'
 import { formatGiB } from './utils'
@@ -57,6 +58,7 @@ function AppContent() {
     setOpen(!open)
   }
 
+  const Home = lazy(() => import('./Home'))
   const Settings = lazy(() => import('./Settings'))
 
   return (
@@ -168,7 +170,11 @@ function AppContent() {
           >
             <Toolbar />
             <Routes>
-              <Route path="/" element={<Home />} />
+              <Route path="/" element={
+                <Suspense fallback={<CircularProgress />}>
+                  <Home />
+                </Suspense>
+              } />
               <Route path="/settings" element={
                 <Suspense fallback={<CircularProgress />}>
                   <Settings />

frontend/src/components/AppBar.tsx

@@ -7,7 +7,7 @@ interface AppBarProps extends MuiAppBarProps {
 
 const drawerWidth = 240;
 
-export const AppBar = styled(MuiAppBar, {
+const AppBar = styled(MuiAppBar, {
   shouldForwardProp: (prop) => prop !== 'open',
 })<AppBarProps>(({ theme, open }) => ({
   zIndex: theme.zIndex.drawer + 1,
@@ -24,3 +24,5 @@ export const AppBar = styled(MuiAppBar, {
     }),
   }),
 }));
+
+export default AppBar

frontend/src/components/Drawer.tsx

@@ -1,9 +1,9 @@
-import { styled } from '@mui/material';
-import MuiDrawer from '@mui/material/Drawer';
+import { styled } from '@mui/material'
+import MuiDrawer from '@mui/material/Drawer'
 
-const drawerWidth = 240;
+const drawerWidth = 240
 
-export const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
+const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
   ({ theme, open }) => ({
     '& .MuiDrawer-paper': {
       position: 'relative',
@@ -27,4 +27,6 @@ export const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !==
       }),
     },
   }),
-);
+)
+
+export default Drawer