display size

package.json

@@ -48,6 +48,7 @@
     "localforage": "^1.10.0",
     "merge-refs": "^1.3.0",
     "pako": "^2.1.0",
+    "pretty-bytes": "^6.1.1",
     "qr-code-styling": "^1.6.0-rc.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/routes/Loader.jsx

@@ -10,7 +10,7 @@ import NyafileImage from "../components/nyafile/NyafileImage.jsx";
  * @returns {JSX.Element}
  * @constructor
  */
-export default function Loader({loadingString, progress}) {
+export default function Loader({loadingString, progress, progressString}) {
     const { t } = useTranslation();
     const { nyafile, holiday } = useContext(AppContext);
     console.log(nyafile?.assetCache?.logo)
@@ -31,6 +31,10 @@ export default function Loader({loadingString, progress}) {
                     <div className={styles.loadingBar}>
                         <div className={styles.loadingBarStretcher} style={{width: `${progress}%`}}></div>
                     </div>
+
+                    <div className={styles.loadingBarText}>
+                        {progressString}
+                    </div>
                 </div>
             </> : null}
         </span>

src/routes/Loader.module.css

@@ -60,7 +60,10 @@
 .loadingBarImage {
     position: absolute;
     z-index: 1;
-    bottom: 1em;
+    bottom: 2em;
     transform: translateX(-40px);
     transition: all 500ms;
+}
+.loadingBarText {
+    font-size: small;
 }

src/routes/Root.jsx

@@ -8,6 +8,7 @@ import localForage from "localforage";
 import * as i18n from "i18next";
 import WooScreen from "./WooScreen.jsx";
 import axios from "axios";
+import prettyBytes from "pretty-bytes";
 
 /**
  * The root. Wraps later routes so that Nyafiles can be real.
@@ -18,6 +19,7 @@ export default function Root() {
     let appContext = useContext(AppContext);
     const [loadingString, setLoadingString] = useState("LOADING_TRANSLATIONS");
     const [loadingPercentage, setLoadingPercentage] = useState(null);
+    const [loadingPercentageText, setLoadingPercentageText] = useState("");
 
     useEffect(() => {
         async function loadNyafile() {
@@ -43,6 +45,7 @@ export default function Root() {
                 const nyafileBlob = await axios.get("/quarky.nya", {
                     onDownloadProgress: progressEvent => {
                         setLoadingPercentage(progressEvent.loaded / progressEvent.total * 100);
+                        setLoadingPercentageText(`${prettyBytes(progressEvent.loaded)}/${prettyBytes(progressEvent.total)}`)
                     },
                     responseType: "blob"
                 })
@@ -95,7 +98,7 @@ export default function Root() {
                 })
             }
 
-            appContext.setLoading(false);
+            //appContext.setLoading(false);
         }
         loadNyafile();
     }, []);
@@ -104,7 +107,7 @@ export default function Root() {
         i18n.changeLanguage(appContext.settings.LANGUAGE)
     }, [appContext.settings.LANGUAGE])
 
-    if(appContext.loading) return <Loader loadingString={loadingString} progress={loadingPercentage} />
+    if(appContext.loading) return <Loader loadingString={loadingString} progress={loadingPercentage} progressString={loadingPercentageText}/>
 
     return <Sentry.ErrorBoundary fallback={<WooScreen/>}><Outlet /></Sentry.ErrorBoundary>
 }