From 5d40f659978a84ecacede0cf5d2a624b44b0277b Mon Sep 17 00:00:00 2001
From: Elmar Kresse <elmar.kresse@stud.htwk-leipzig.de>
Date: Fri, 29 Mar 2024 21:52:33 +0100
Subject: [PATCH] feat:#48 added loading indicator and disabled state

---
 frontend/src/components/RenameModules.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/RenameModules.vue b/frontend/src/components/RenameModules.vue
index dfbadbc..9875c0f 100644
--- a/frontend/src/components/RenameModules.vue
+++ b/frontend/src/components/RenameModules.vue
@@ -35,8 +35,10 @@ const columns = computed(() => [
 ]);
 
 const toast = useToast();
+const requestIsPending = ref(false);
 
 async function finalStep() {
+  requestIsPending.value = true;
   const createFeed: Promise<string> = createIndividualFeed(
     store.getAllModules(),
   );
@@ -44,6 +46,7 @@ async function finalStep() {
   // Check if createFeed Promise is resolved
   createFeed.then(async (token: string) => {
     tokenStore().setToken(token);
+    requestIsPending.value = false;
     await router.push("/calendar-link");
   });
 
@@ -157,9 +160,9 @@ async function finalStep() {
       </div>
 
       <Button
-        :disabled="store.isEmpty()"
+        :disabled="store.isEmpty() || requestIsPending"
         class="col-12 md:col-4 mb-3 align-self-end"
-        icon="pi pi-save"
+        :icon="requestIsPending ? 'pi pi-spin pi-spinner' : 'pi pi-save'"
         :label="$t('renameModules.nextStep')"
         @click="finalStep()"
       />