frontend performance optimizations

frontend/src/Layout.tsx

@@ -55,7 +55,7 @@ export default function Layout() {
 
   return (
     <ThemeProvider theme={theme}>
-      <SocketSubscriber>
+      <SocketSubscriber />
       <Helmet>
         <title>
           {settings.appTitle}
@@ -174,7 +174,6 @@ export default function Layout() {
         </Box>
       </Box>
       <Toaster />
-      </SocketSubscriber>
     </ThemeProvider>
   )
 }

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()
+  const percentageToNumber = useCallback(
+    () => isCompleted()
       ? 100
-    : Number(download.progress.percentage.replace('%', ''))
+      : Number(download.progress.percentage.replace('%', '')),
+    [download.progress.percentage, isCompleted]
+  )
 
   return (
     <Card>

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')}
             />
-            </>
           </Grid>
         ))
       }

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
   }