From 29195fb00a3e2408bfde32f4948708070a314890 Mon Sep 17 00:00:00 2001
From: Thorsten Rinne <thorsten@phpmyfaq.de>
Date: Sun, 12 Jan 2025 10:18:41 +0100
Subject: [PATCH] feat(update): added loading spinners (#3321)

---
 .../admin/assets/src/configuration/upgrade.js | 192 +++++++++---------
 .../admin/configuration/upgrade.twig          |   2 +-
 2 files changed, 97 insertions(+), 97 deletions(-)

diff --git a/phpmyfaq/admin/assets/src/configuration/upgrade.js b/phpmyfaq/admin/assets/src/configuration/upgrade.js
index 386121bcc3..a86512b129 100644
--- a/phpmyfaq/admin/assets/src/configuration/upgrade.js
+++ b/phpmyfaq/admin/assets/src/configuration/upgrade.js
@@ -192,125 +192,125 @@ export const handleCheckForUpdates = () => {
   if (installButton) {
     installButton.addEventListener('click', async (event) => {
       event.preventDefault();
+      const spinner = document.getElementById('spinner-install-package');
+      spinner.classList.remove('d-none');
       await createTemporaryBackup();
+      spinner.classList.add('d-none');
     });
   }
 };
 
 const createTemporaryBackup = async () => {
-  await fetch('./api/create-temporary-backup', {
-    method: 'POST',
-    headers: {
-      Accept: 'application/json, text/plain, */*',
-      'Content-Type': 'application/json',
-    },
-  })
-    .then(async (response) => {
-      const progressBarBackup = document.getElementById('result-backup-package');
-      const reader = response.body.getReader();
-
-      function pump() {
-        return reader.read().then(({ done, value }) => {
-          const decodedValue = new TextDecoder().decode(value);
-
-          if (done) {
-            progressBarBackup.style.width = '100%';
-            progressBarBackup.innerText = '100%';
-            progressBarBackup.classList.remove('progress-bar-animated');
-            return;
-          } else {
-            progressBarBackup.style.width = JSON.parse(JSON.stringify(decodedValue)).progress;
-            progressBarBackup.innerText = JSON.parse(JSON.stringify(decodedValue)).progress;
-          }
-
-          return pump();
-        });
+  try {
+    const response = await fetch('./api/create-temporary-backup', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json, text/plain, */*',
+        'Content-Type': 'application/json',
+      },
+    });
+
+    const progressBarBackup = document.getElementById('result-backup-package');
+    const reader = response.body.getReader();
+
+    async function pump() {
+      const { done, value } = await reader.read();
+      const decodedValue = new TextDecoder().decode(value);
+
+      if (done) {
+        progressBarBackup.style.width = '100%';
+        progressBarBackup.innerText = '100%';
+        progressBarBackup.classList.remove('progress-bar-animated');
+        return;
+      } else {
+        progressBarBackup.style.width = JSON.parse(JSON.stringify(decodedValue)).progress;
+        progressBarBackup.innerText = JSON.parse(JSON.stringify(decodedValue)).progress;
       }
 
       return pump();
-    })
-    .catch((error) => {
-      console.error(error);
-    });
+    }
+
+    await pump();
+  } catch (error) {
+    console.error(error);
+  }
 
   await installPackage();
 };
 
 const installPackage = async () => {
-  await fetch('./api/install-package', {
-    method: 'POST',
-    headers: {
-      Accept: 'application/json, text/plain, */*',
-      'Content-Type': 'application/json',
-    },
-  })
-    .then(async (response) => {
-      const progressBarInstallation = document.getElementById('result-install-package');
-      const reader = response.body.getReader();
-      const card = document.getElementById('pmf-update-step-install-package');
-
-      function pump() {
-        return reader.read().then(({ done, value }) => {
-          const decodedValue = new TextDecoder().decode(value);
-
-          if (done) {
-            progressBarInstallation.style.width = '100%';
-            progressBarInstallation.innerText = '100%';
-            progressBarInstallation.classList.remove('progress-bar-animated');
-            return;
-          } else {
-            progressBarInstallation.style.width = JSON.parse(JSON.stringify(decodedValue)).progress;
-            progressBarInstallation.innerText = JSON.parse(JSON.stringify(decodedValue)).progress;
-          }
-
-          return pump();
-        });
+  try {
+    const response = await fetch('./api/install-package', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json, text/plain, */*',
+        'Content-Type': 'application/json',
+      },
+    });
+
+    const progressBarInstallation = document.getElementById('result-install-package');
+    const reader = response.body.getReader();
+    const card = document.getElementById('pmf-update-step-install-package');
+
+    async function pump() {
+      const { done, value } = await reader.read();
+      const decodedValue = new TextDecoder().decode(value);
+
+      if (done) {
+        progressBarInstallation.style.width = '100%';
+        progressBarInstallation.innerText = '100%';
+        progressBarInstallation.classList.remove('progress-bar-animated');
+        return;
+      } else {
+        progressBarInstallation.style.width = JSON.parse(JSON.stringify(decodedValue)).progress;
+        progressBarInstallation.innerText = JSON.parse(JSON.stringify(decodedValue)).progress;
       }
 
       return pump();
-    })
-    .catch((error) => {
-      console.error(error);
-    });
+    }
+
+    await pump();
+  } catch (error) {
+    console.error(error);
+  }
 
   await updateDatabase();
 };
 
 const updateDatabase = async () => {
-  await fetch('./api/update-database', {
-    method: 'POST',
-    headers: {
-      Accept: 'application/json, text/plain, */*',
-      'Content-Type': 'application/json',
-    },
-  })
-    .then(async (response) => {
-      const progressBarInstallation = document.getElementById('result-update-database');
-      const reader = response.body.getReader();
-      const card = document.getElementById('pmf-update-step-install-package');
-
-      function pump() {
-        return reader.read().then(({ done, value }) => {
-          const decodedValue = new TextDecoder().decode(value);
-
-          if (done) {
-            progressBarInstallation.style.width = '100%';
-            progressBarInstallation.innerText = '100%';
-            progressBarInstallation.classList.remove('progress-bar-animated');
-            card.classList.add('text-bg-success');
-            return;
-          } else {
-            progressBarInstallation.style.width = JSON.parse(JSON.stringify(decodedValue)).progress;
-            progressBarInstallation.innerText = JSON.parse(JSON.stringify(decodedValue)).progress;
-          }
-
-          return pump();
-        });
+  try {
+    const response = await fetch('./api/update-database', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json, text/plain, */*',
+        'Content-Type': 'application/json',
+      },
+    });
+
+    const progressBarInstallation = document.getElementById('result-update-database');
+    const reader = response.body.getReader();
+    const card = document.getElementById('pmf-update-step-install-package');
+
+    async function pump() {
+      const { done, value } = await reader.read();
+      const decodedValue = new TextDecoder().decode(value);
+
+      if (done) {
+        progressBarInstallation.style.width = '100%';
+        progressBarInstallation.innerText = '100%';
+        progressBarInstallation.classList.remove('progress-bar-animated');
+        card.classList.add('text-bg-success');
+        return;
+      } else {
+        progressBarInstallation.style.width = JSON.parse(JSON.stringify(decodedValue)).progress;
+        progressBarInstallation.innerText = JSON.parse(JSON.stringify(decodedValue)).progress;
       }
 
       return pump();
-    })
-    .catch((error) => {
-      console.error(error);
-    });
+    }
+
+    await pump();
+  } catch (error) {
+    console.error(error);
+  }
 };
diff --git a/phpmyfaq/assets/templates/admin/configuration/upgrade.twig b/phpmyfaq/assets/templates/admin/configuration/upgrade.twig
index c46d1fc002..28fca953c8 100644
--- a/phpmyfaq/assets/templates/admin/configuration/upgrade.twig
+++ b/phpmyfaq/assets/templates/admin/configuration/upgrade.twig
@@ -127,7 +127,7 @@
               <div>
                 <button type="button" class="btn btn-primary mb-2" id="pmf-button-install-package">
                   {{ 'msgInstallDownloadedPackage' | translate }}
-                  <div class="spinner-border spinner-border-sm ms-2 d-none" role="status">
+                  <div class="spinner-border spinner-border-sm ms-2 d-none" id="spinner-install-package" role="status">
                     <span class="visually-hidden">Loading...</span>
                   </div>
                 </button>