improvements https://github.com/emsesp/EMS-ESP32/pull/1931#issuecomment-2294803388

interface/src/app/settings/DownloadUpload.tsx

@@ -89,12 +89,12 @@ const DownloadUpload = () => {
   // called immediately to get the latest version, on page load
   // set immediate to false to avoid calling the API on page load and GH blocking while testing!
   const { data: latestVersion } = useRequest(getStableVersion, {
-    immediate: true
+    // immediate: true
-    // immediate: false
+    immediate: false
   });
   const { data: latestDevVersion } = useRequest(getDevVersion, {
-    immediate: true
+    // immediate: true
-    // immediate: false
+    immediate: false
   });
 
   const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/';
@@ -299,9 +299,15 @@ const DownloadUpload = () => {
           )}
         </Box>
 
-        <SingleUpload setRestartNeeded={setRestartNeeded} />
+        <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
+          {LL.UPLOAD()}
+        </Typography>
 
-        {restartNeeded && (
+        <Box mb={2} color="warning.main">
+          <Typography variant="body2">{LL.UPLOAD_TEXT()}</Typography>
+        </Box>
+
+        {restartNeeded ? (
           <MessageBox mt={2} level="warning" message={LL.RESTART_TEXT(0)}>
             <Button
               startIcon={<PowerSettingsNewIcon />}
@@ -312,6 +318,8 @@ const DownloadUpload = () => {
               {LL.RESTART()}
             </Button>
           </MessageBox>
+        ) : (
+          <SingleUpload setRestartNeeded={setRestartNeeded} />
         )}
       </>
     );

interface/src/components/upload/SingleUpload.tsx

@@ -2,7 +2,13 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
-import { Box, Button, LinearProgress, Typography } from '@mui/material';
+import {
+  Box,
+  Button,
+  LinearProgress,
+  type LinearProgressProps,
+  Typography
+} from '@mui/material';
 
 import * as SystemApi from 'api/system';
 
@@ -11,6 +17,21 @@ import { useI18nContext } from 'i18n/i18n-react';
 
 import DragNdrop from './DragNdrop';
 
+function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography variant="body2" color="text.secondary">{`${Math.round(
+          props.value
+        )}%`}</Typography>
+      </Box>
+    </Box>
+  );
+}
+
 const SingleUpload = ({ setRestartNeeded }) => {
   const [md5, setMd5] = useState<string>();
   const [file, setFile] = useState<File>();
@@ -50,19 +71,10 @@ const SingleUpload = ({ setRestartNeeded }) => {
 
   return (
     <>
-      <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
-        {LL.UPLOAD()}
-      </Typography>
-
-      <Box mb={2} color="warning.main">
-        <Typography variant="body2">{LL.UPLOAD_TEXT()}</Typography>
-      </Box>
-
       {isUploading ? (
         <>
           <Box width="100%" p={2}>
-            <LinearProgress
+            <LinearProgressWithLabel
-              variant="determinate"
               value={
                 progress.total === 0 || progress.loaded === 0
                   ? 0