Add loading bar to testing page and make downloading more robust

3 files changed, 34 insertions, 5 deletions

diff --git a/frontend/src/components/settings/pages/general/Updater.tsx b/frontend/src/components/settings/pages/general/Updater.tsx
index 3c7e53f1..9fcc2dd3 100644
--- a/frontend/src/components/settings/pages/general/Updater.tsx
+++ b/frontend/src/components/settings/pages/general/Updater.tsx
@@ -66,7 +66,7 @@ function PatchNotesModal({ versionInfo, closeModal }: { versionInfo: VerInfo | n
 }
 
 export default function UpdaterSettings() {
-  const { isLoaderUpdating, setIsLoaderUpdating, versionInfo, setVersionInfo } = useDeckyState();
+  const { isLoaderUpdating, versionInfo, setVersionInfo } = useDeckyState();
 
   const [checkingForUpdates, setCheckingForUpdates] = useState<boolean>(false);
   const [updateProgress, setUpdateProgress] = useState<number>(-1);
@@ -77,7 +77,6 @@ export default function UpdaterSettings() {
   useEffect(() => {
     const a = DeckyBackend.addEventListener('updater/update_download_percentage', (percentage) => {
       setUpdateProgress(percentage);
-      setIsLoaderUpdating(true);
     });
 
     const b = DeckyBackend.addEventListener('updater/finish_download', () => {
@@ -86,8 +85,8 @@ export default function UpdaterSettings() {
     });
 
     return () => {
-      DeckyBackend.removeEventListener('frontend/update_download_percentage', a);
-      DeckyBackend.removeEventListener('frontend/finish_download', b);
+      DeckyBackend.removeEventListener('updater/update_download_percentage', a);
+      DeckyBackend.removeEventListener('updater/finish_download', b);
     };
   }, []);
 
diff --git a/frontend/src/components/settings/pages/testing/index.tsx b/frontend/src/components/settings/pages/testing/index.tsx
index 4fe0f240..2467f3c5 100644
--- a/frontend/src/components/settings/pages/testing/index.tsx
+++ b/frontend/src/components/settings/pages/testing/index.tsx
@@ -5,6 +5,7 @@ import {
   Field,
   Focusable,
   Navigation,
+  ProgressBar,
   SteamSpinner,
 } from 'decky-frontend-lib';
 import { useEffect, useState } from 'react';
@@ -26,8 +27,11 @@ const downloadTestingVersion = DeckyBackend.callable<[pr_id: number, sha: string
 
 export default function TestingVersionList() {
   const { t } = useTranslation();
+
   const [testingVersions, setTestingVersions] = useState<TestingVersion[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
+  const [updateProgress, setUpdateProgress] = useState<number | null>(null);
+  const [reloading, setReloading] = useState<boolean>(false);
 
   useEffect(() => {
     (async () => {
@@ -36,6 +40,21 @@ export default function TestingVersionList() {
     })();
   }, []);
 
+  useEffect(() => {
+    const a = DeckyBackend.addEventListener('updater/update_download_percentage', (percentage) => {
+      setUpdateProgress(percentage);
+    });
+
+    const b = DeckyBackend.addEventListener('updater/finish_download', () => {
+      setReloading(true);
+    });
+
+    return () => {
+      DeckyBackend.removeEventListener('updater/update_download_percentage', a);
+      DeckyBackend.removeEventListener('updater/finish_download', b);
+    };
+  }, []);
+
   if (loading) {
     return (
       <>
@@ -54,6 +73,7 @@ export default function TestingVersionList() {
 
   return (
     <DialogBody>
+      {updateProgress !== null && <ProgressBar nProgress={updateProgress} indeterminate={reloading} />}
       <DialogControlsSection>
         <h4>{t('Testing.header')}</h4>
         <ul style={{ listStyleType: 'none', padding: '0' }}>
@@ -71,11 +91,18 @@ export default function TestingVersionList() {
                     <DialogButton
                       style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
                       onClick={async () => {
+                        DeckyPluginLoader.toaster.toast({
+                          title: t('Testing.start_download_toast', { id: version.id }),
+                          body: null,
+                        });
                         try {
                           await downloadTestingVersion(version.id, version.head_sha);
                         } catch (e) {
                           if (e instanceof Error) {
-                            DeckyPluginLoader.toaster.toast({ title: 'Error Installing PR', body: e.message });
+                            DeckyPluginLoader.toaster.toast({
+                              title: t('Testing.error'),
+                              body: `${e.name}: ${e.message}`,
+                            });
                           }
                         }
                         setSetting('branch', UpdateBranch.Testing);
diff --git a/frontend/src/plugin-loader.tsx b/frontend/src/plugin-loader.tsx
index d9b1211e..7a87253f 100644
--- a/frontend/src/plugin-loader.tsx
+++ b/frontend/src/plugin-loader.tsx
@@ -78,6 +78,9 @@ class PluginLoader extends Logger {
       'loader/add_multiple_plugins_install_prompt',
       this.addMultiplePluginsInstallPrompt.bind(this),
     );
+    DeckyBackend.addEventListener('updater/update_download_percentage', () => {
+      this.deckyState.setIsLoaderUpdating(true);
+    });
 
     this.tabsHook.init();