code refactoring

frontend/src/components/DownloadDialog.tsx

@@ -22,6 +22,7 @@ import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
 import { TransitionProps } from '@mui/material/transitions'
 import {
+  FC,
   forwardRef,
   useMemo,
   useRef,
@@ -55,11 +56,7 @@ type Props = {
   onDownloadStart: (url: string) => void
 }
 
-export default function DownloadDialog({
-  open,
-  onClose,
-  onDownloadStart
-}: Props) {
+const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
   const settings = useRecoilValue(settingsState)
   const isConnected = useRecoilValue(connectedState)
   const availableDownloadPaths = useRecoilValue(availableDownloadPathsState)
@@ -368,4 +365,6 @@ export default function DownloadDialog({
       </Box>
     </Dialog>
   )
-}
+}
+
+export default DownloadDialog

frontend/src/components/FreeSpaceIndicator.tsx

@@ -1,26 +1,21 @@
 import StorageIcon from '@mui/icons-material/Storage'
-import { useEffect, useState } from 'react'
+import { useRecoilValue } from 'recoil'
+import { freeSpaceBytesState } from '../atoms/status'
 import { formatGiB } from '../utils'
-import { useRPC } from '../hooks/useRPC'
 
 const FreeSpaceIndicator = () => {
-  const [freeSpace, setFreeSpace] = useState(0)
-
-  const { client } = useRPC()
-
-  useEffect(() => {
-    client.freeSpace().then(r => setFreeSpace(r.result))
-  }, [client])
+  const freeSpace = useRecoilValue(freeSpaceBytesState)
 
   return (
     <div style={{
       display: 'flex',
       alignItems: 'center',
       flexWrap: 'wrap',
+      gap: 3
     }}>
       <StorageIcon />
       <span>
-        &nbsp;{formatGiB(freeSpace)}&nbsp;
+        {formatGiB(freeSpace)}
       </span>
     </div>
   )

frontend/src/components/HomeActions.tsx

@@ -1,9 +1,9 @@
-import { useState } from 'react'
+import { Suspense, useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { loadingAtom } from '../atoms/ui'
+import { useToast } from '../hooks/toast'
 import DownloadDialog from './DownloadDialog'
 import HomeSpeedDial from './HomeSpeedDial'
-import { useToast } from '../hooks/toast'
 import TemplatesEditor from './TemplatesEditor'
 
 const HomeActions: React.FC = () => {
@@ -20,18 +20,20 @@ const HomeActions: React.FC = () => {
         onDownloadOpen={() => setOpenDownload(true)}
         onEditorOpen={() => setOpenEditor(true)}
       />
-      <DownloadDialog
-        open={openDownload}
-        onClose={() => {
-          setOpenDownload(false)
-          setIsLoading(true)
-        }}
-        onDownloadStart={(url) => {
-          pushMessage(`Requested ${url}`, 'info')
-          setOpenDownload(false)
-          setIsLoading(true)
-        }}
-      />
+      <Suspense>
+        <DownloadDialog
+          open={openDownload}
+          onClose={() => {
+            setOpenDownload(false)
+            setIsLoading(true)
+          }}
+          onDownloadStart={(url) => {
+            pushMessage(`Requested ${url}`, 'info')
+            setOpenDownload(false)
+            setIsLoading(true)
+          }}
+        />
+      </Suspense>
       <TemplatesEditor
         open={openEditor}
         onClose={() => setOpenEditor(false)}