Merge pull request #76 from stromcon/feature/mods-backdrop

Feature/mods backdrop

package.json

@@ -1,7 +1,7 @@
 {
   "name": "emusak",
   "productName": "emusak",
-  "version": "1.0.69",
+  "version": "1.0.70",
   "description": "Saves, shaders, firmwares and keys manager for switch emulators",
   "main": ".webpack/main",
   "repository": "https://github.com/stromcon/emusak-ui.git",

src/service/ryujinx.ts

@@ -358,8 +358,10 @@ export const installModToRyujinx = async (config: IRyujinxConfig, titleID: strin
     archive.extractAllTo(path.resolve(modPath, '..'),true);
   }
 
-  await Swal.fire({
+  Swal.fire({
     icon: 'success',
     text: `${modName} successfully installed ${isZip ? '' : `at ${modPath}`}`
   })
+
+  return true;
 }

src/ui/changelog.tsx

@@ -35,6 +35,7 @@ const Changelog = () => {
         <h1 style={{ textAlign: 'center' }}>What's new ? v{version}</h1>
         <br />
         <ul style={{ marginLeft: 20 }}>
+          <li>Added a progress indicator while downloading mods (some texture packs are heavy)</li>
           <li>Fixed a bug preventing users sharing their shaders from mailine configuration if logs were disabled on mainline build while logs are disabled and using Ryujinx LDN without portable mode (thanks PHAT for reporting)</li>
           <li>Uploaded tons of new mods</li>
           <li>Add romFS mods support</li>

src/ui/page/ryujinx/gamelist/ModsList.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import {
-  Avatar,
-  Button,
+  Avatar, Backdrop,
+  Button, CircularProgress,
   Dialog,
   DialogTitle,
   List,
   ListItem,
-  ListItemAvatar, ListItemText,
+  ListItemAvatar, ListItemText, makeStyles,
   TableBody,
   TableCell,
   TableRow
@@ -30,15 +30,24 @@ interface IModsListProps {
   filter: string;
 }
 
+const useStyles = makeStyles((theme) => ({
+  backdrop: {
+    zIndex: theme.zIndex.drawer + 1,
+    color: '#fff',
+  },
+}));
+
 export default ({
   games,
   extractNameFromID,
   emusakMods,
   config,
   filter,
 }: IModsListProps) => {
+  const classes = useStyles();
   const [dialogVersionOpen, setDialogVersionOpen] = React.useState(false);
   const [modsDialogOpen, setModsDialogOpen] = React.useState(false);
+  const [backdropOpen, setBackdropOpen] = React.useState(false);
 
   const [modsName, setModsName]: [string[], Function] = React.useState([]);
   const [modsVersions, setModsVersions]: [string[], Function] = React.useState([]);
@@ -70,8 +79,10 @@ export default ({
     const modFile: any[] = await getEmusakMod(pickedTitleId, pickedVersion, modName);
     const mod = modFile.find(m => m.type === "file").name;
     setModsDialogOpen(false);
+    setBackdropOpen(true);
     const file = await downloadEmusakMod(pickedTitleId, pickedVersion, modName, mod);
     await installModToRyujinx(config, pickedTitleId, modName, mod, file);
+    setBackdropOpen(false);
   }
 
   return (
@@ -117,6 +128,11 @@ export default ({
         </List>
       </Dialog>
 
+      <Backdrop className={classes.backdrop} open={backdropOpen} onClick={() => {}}>
+        <CircularProgress color="secondary" /> <br />
+        <h3>&nbsp; Downloading and installing mod ...</h3>
+      </Backdrop>
+
       {
         games
           .filter(titleId => titleId != '0000000000000000')