From 1d9dabd397a7df3560279951ee85064bf1a9a74f Mon Sep 17 00:00:00 2001
From: marcobaobao <marco.piovanello@gmail.com>
Date: Thu, 2 Nov 2023 10:42:59 +0100
Subject: [PATCH] frontend performance optimizations

---
 frontend/src/Layout.tsx                       | 225 +++++++++---------
 frontend/src/components/DownloadCard.tsx      |  15 +-
 frontend/src/components/DownloadsCardView.tsx |  12 +-
 frontend/src/components/Splash.tsx            |   2 +-
 4 files changed, 129 insertions(+), 125 deletions(-)

diff --git a/frontend/src/Layout.tsx b/frontend/src/Layout.tsx
index a7fce7d..837a3e9 100644
--- a/frontend/src/Layout.tsx
+++ b/frontend/src/Layout.tsx
@@ -55,126 +55,125 @@ export default function Layout() {
 
   return (
     <ThemeProvider theme={theme}>
-      <SocketSubscriber>
-        <Helmet>
-          <title>
-            {settings.appTitle}
-          </title>
-        </Helmet>
-        <Box sx={{ display: 'flex' }}>
-          <CssBaseline />
-          <AppBar position="absolute" open={open}>
-            <Toolbar sx={{ pr: '24px' }}>
-              <IconButton
-                edge="start"
-                color="inherit"
-                aria-label="open drawer"
-                onClick={toggleDrawer}
-                sx={{
-                  marginRight: '36px',
-                  ...(open && { display: 'none' }),
-                }}
-              >
-                <Menu />
-              </IconButton>
-              <Typography
-                component="h1"
-                variant="h6"
-                color="inherit"
-                noWrap
-                sx={{ flexGrow: 1 }}
-              >
-                {settings.appTitle}
-              </Typography>
-              <Suspense fallback={i18n.t('loadingLabel')}>
-                <FreeSpaceIndicator />
-              </Suspense>
-              <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                flexWrap: 'wrap',
-                marginLeft: '4px',
-                gap: 3,
-              }}>
-                <SettingsEthernet />
-                <span>
-                  {isConnected ? settings.serverAddr : i18n.t('notConnectedText')}
-                </span>
-              </div>
-            </Toolbar>
-          </AppBar>
-          <Drawer variant="permanent" open={open}>
-            <Toolbar
+      <SocketSubscriber />
+      <Helmet>
+        <title>
+          {settings.appTitle}
+        </title>
+      </Helmet>
+      <Box sx={{ display: 'flex' }}>
+        <CssBaseline />
+        <AppBar position="absolute" open={open}>
+          <Toolbar sx={{ pr: '24px' }}>
+            <IconButton
+              edge="start"
+              color="inherit"
+              aria-label="open drawer"
+              onClick={toggleDrawer}
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-                px: [1],
+                marginRight: '36px',
+                ...(open && { display: 'none' }),
               }}
             >
-              <IconButton onClick={toggleDrawer}>
-                <ChevronLeft />
-              </IconButton>
-            </Toolbar>
-            <Divider />
-            <List component="nav">
-              <Link to={'/'} style={
-                {
-                  textDecoration: 'none',
-                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
-                }
-              }>
-                <ListItemButton>
-                  <ListItemIcon>
-                    <Dashboard />
-                  </ListItemIcon>
-                  <ListItemText primary={i18n.t('homeButtonLabel')} />
-                </ListItemButton>
-              </Link>
-              <Link to={'/archive'} style={
-                {
-                  textDecoration: 'none',
-                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
-                }
-              }>
-                <ListItemButton>
-                  <ListItemIcon>
-                    <DownloadIcon />
-                  </ListItemIcon>
-                  <ListItemText primary={i18n.t('archiveButtonLabel')} />
-                </ListItemButton>
-              </Link>
-              <Link to={'/settings'} style={
-                {
-                  textDecoration: 'none',
-                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
-                }
-              }>
-                <ListItemButton>
-                  <ListItemIcon>
-                    <SettingsIcon />
-                  </ListItemIcon>
-                  <ListItemText primary={i18n.t('settingsButtonLabel')} />
-                </ListItemButton>
-              </Link>
-              <ThemeToggler />
-              <Logout />
-            </List>
-          </Drawer>
-          <Box
-            component="main"
+              <Menu />
+            </IconButton>
+            <Typography
+              component="h1"
+              variant="h6"
+              color="inherit"
+              noWrap
+              sx={{ flexGrow: 1 }}
+            >
+              {settings.appTitle}
+            </Typography>
+            <Suspense fallback={i18n.t('loadingLabel')}>
+              <FreeSpaceIndicator />
+            </Suspense>
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+              marginLeft: '4px',
+              gap: 3,
+            }}>
+              <SettingsEthernet />
+              <span>
+                {isConnected ? settings.serverAddr : i18n.t('notConnectedText')}
+              </span>
+            </div>
+          </Toolbar>
+        </AppBar>
+        <Drawer variant="permanent" open={open}>
+          <Toolbar
             sx={{
-              flexGrow: 1,
-              height: '100vh',
-              overflow: 'auto',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              px: [1],
             }}
           >
-            <Toolbar />
-            <Outlet />
-          </Box>
+            <IconButton onClick={toggleDrawer}>
+              <ChevronLeft />
+            </IconButton>
+          </Toolbar>
+          <Divider />
+          <List component="nav">
+            <Link to={'/'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <Dashboard />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('homeButtonLabel')} />
+              </ListItemButton>
+            </Link>
+            <Link to={'/archive'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <DownloadIcon />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('archiveButtonLabel')} />
+              </ListItemButton>
+            </Link>
+            <Link to={'/settings'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <SettingsIcon />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('settingsButtonLabel')} />
+              </ListItemButton>
+            </Link>
+            <ThemeToggler />
+            <Logout />
+          </List>
+        </Drawer>
+        <Box
+          component="main"
+          sx={{
+            flexGrow: 1,
+            height: '100vh',
+            overflow: 'auto',
+          }}
+        >
+          <Toolbar />
+          <Outlet />
         </Box>
-        <Toaster />
-      </SocketSubscriber>
+      </Box>
+      <Toaster />
     </ThemeProvider>
   )
 }
\ No newline at end of file
diff --git a/frontend/src/components/DownloadCard.tsx b/frontend/src/components/DownloadCard.tsx
index c080a90..9789ba8 100644
--- a/frontend/src/components/DownloadCard.tsx
+++ b/frontend/src/components/DownloadCard.tsx
@@ -15,6 +15,7 @@ import {
   Stack,
   Typography
 } from '@mui/material'
+import { useCallback } from 'react'
 import { RPCResult } from '../types'
 import { ellipsis, formatSpeedMiB, mapProcessStatus, roundMiB } from '../utils'
 
@@ -34,11 +35,17 @@ const Resolution: React.FC<{ resolution?: string }> = ({ resolution }) => {
 }
 
 const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
-  const isCompleted = () => download.progress.percentage === '-1'
+  const isCompleted = useCallback(
+    () => download.progress.percentage === '-1',
+    [download.progress.percentage]
+  )
 
-  const percentageToNumber = () => isCompleted()
-    ? 100
-    : Number(download.progress.percentage.replace('%', ''))
+  const percentageToNumber = useCallback(
+    () => isCompleted()
+      ? 100
+      : Number(download.progress.percentage.replace('%', '')),
+    [download.progress.percentage, isCompleted]
+  )
 
   return (
     <Card>
diff --git a/frontend/src/components/DownloadsCardView.tsx b/frontend/src/components/DownloadsCardView.tsx
index 1fb6668..e4047d9 100644
--- a/frontend/src/components/DownloadsCardView.tsx
+++ b/frontend/src/components/DownloadsCardView.tsx
@@ -20,13 +20,11 @@ const DownloadsCardView: React.FC = () => {
       {
         downloads.map(download => (
           <Grid item xs={4} sm={8} md={6} key={download.id}>
-            <>
-              <DownloadCard
-                download={download}
-                onStop={() => abort(download.id)}
-                onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
-              />
-            </>
+            <DownloadCard
+              download={download}
+              onStop={() => abort(download.id)}
+              onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
+            />
           </Grid>
         ))
       }
diff --git a/frontend/src/components/Splash.tsx b/frontend/src/components/Splash.tsx
index 2b303a4..85def23 100644
--- a/frontend/src/components/Splash.tsx
+++ b/frontend/src/components/Splash.tsx
@@ -25,7 +25,7 @@ export default function Splash() {
   const { i18n } = useI18n()
   const activeDownloads = useRecoilValue(activeDownloadsState)
 
-  if (!activeDownloads || activeDownloads.length !== 0) {
+  if (activeDownloads.length !== 0) {
     return null
   }