code refactoring

frontend/src/Layout.tsx

@@ -16,7 +16,7 @@ import ListItemText from '@mui/material/ListItemText'
 import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
 import { grey } from '@mui/material/colors'
-import { useMemo, useState } from 'react'
+import { Suspense, useMemo, useState } from 'react'
 import { Helmet } from 'react-helmet'
 import { Link, Outlet } from 'react-router-dom'
 import { useRecoilValue } from 'recoil'
@@ -86,11 +86,14 @@ export default function Layout() {
               >
                 {settings.appTitle}
               </Typography>
-              <FreeSpaceIndicator />
+              <Suspense fallback={i18n.t('loadingLabel')}>
+                <FreeSpaceIndicator />
+              </Suspense>
               <div style={{
                 display: 'flex',
                 alignItems: 'center',
                 flexWrap: 'wrap',
+                marginLeft: '4px',
                 gap: 3,
               }}>
                 <SettingsEthernet />

frontend/src/assets/i18n.yaml

@@ -41,6 +41,7 @@ languages:
     settingsButtonLabel: Settings
     rpcAuthenticationLabel: RPC authentication
     themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
@@ -89,6 +90,7 @@ languages:
     settingsButtonLabel: Settings
     rpcAuthenticationLabel: RPC authentication
     themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: Nom de l'application
     savedTemplates: Saved templates
     templatesEditor: Templates editor
@@ -134,6 +136,7 @@ languages:
     settingsButtonLabel: Settings
     rpcAuthenticationLabel: RPC authentication
     themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: Titolo applicazione
     savedTemplates: Template salvati
     templatesEditor: Editor template
@@ -180,6 +183,7 @@ languages:
     settingsButtonLabel: Settings
     rpcAuthenticationLabel: RPC authentication
     themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App 标题
     savedTemplates: Saved templates
     templatesEditor: Templates editor
@@ -224,6 +228,7 @@ languages:
     settingsButtonLabel: Settings
     rpcAuthenticationLabel: RPC authentication
     themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
@@ -268,6 +273,7 @@ languages:
     settingsButtonLabel: Settings
     rpcAuthenticationLabel: RPC authentication
     themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
@@ -312,6 +318,7 @@ languages:
     settingsButtonLabel: Settings
     rpcAuthenticationLabel: RPC authentication
     themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
@@ -357,6 +364,7 @@ languages:
     settingsButtonLabel: Settings
     rpcAuthenticationLabel: RPC authentication
     themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
@@ -401,6 +409,7 @@ languages:
     settingsButtonLabel: Settings
     rpcAuthenticationLabel: RPC authentication
     themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
@@ -445,6 +454,7 @@ languages:
     settingsButtonLabel: Settings
     rpcAuthenticationLabel: RPC authentication
     themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
@@ -489,6 +499,7 @@ languages:
     settingsButtonLabel: Settings
     rpcAuthenticationLabel: RPC authentication
     themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor

frontend/src/atoms/status.ts

@@ -23,13 +23,13 @@ export const isDownloadingState = atom({
   default: false
 })
 
-// export const freeSpaceBytesState = selector({
+export const freeSpaceBytesState = selector({
-//   key: 'freeSpaceBytesState',
+  key: 'freeSpaceBytesState',
-//   get: async ({ get }) => {
+  get: async ({ get }) => {
-//     const res = await get(rpcClientState).freeSpace()
+    const res = await get(rpcClientState).freeSpace()
-//     return res.result
+    return res.result
-//   }
+  }
-// })
+})
 
 export const availableDownloadPathsState = selector({
   key: 'availableDownloadPathsState',

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({
+const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
-  open,
-  onClose,
-  onDownloadStart
-}: Props) {
   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 freeSpace = useRecoilValue(freeSpaceBytesState)
-
-  const { client } = useRPC()
-
-  useEffect(() => {
-    client.freeSpace().then(r => setFreeSpace(r.result))
-  }, [client])
 
   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
+      <Suspense>
-        open={openDownload}
+        <DownloadDialog
-        onClose={() => {
+          open={openDownload}
-          setOpenDownload(false)
+          onClose={() => {
-          setIsLoading(true)
+            setOpenDownload(false)
-        }}
+            setIsLoading(true)
-        onDownloadStart={(url) => {
+          }}
-          pushMessage(`Requested ${url}`, 'info')
+          onDownloadStart={(url) => {
-          setOpenDownload(false)
+            pushMessage(`Requested ${url}`, 'info')
-          setIsLoading(true)
+            setOpenDownload(false)
-        }}
+            setIsLoading(true)
-      />
+          }}
+        />
+      </Suspense>
       <TemplatesEditor
         open={openEditor}
         onClose={() => setOpenEditor(false)}