feat: add loading state for environment context menu actions

Applicable to team workspaces.
hoppscotch · Sep 10, 2024 · 14a348b · 14a348b
1 parent 25caa7a
commit 14a348b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/packages/hoppscotch-common/src/components/environments/index.vue b/packages/hoppscotch-common/src/components/environments/index.vue
@@ -10,6 +10,7 @@
         :duplicate-global-environment-loading="
           duplicateGlobalEnvironmentLoading
         "
+        :show-context-menu-loading-state="workspace.type === 'team'"
         class="border-b border-dividerLight"
         @duplicate-global-environment="duplicateGlobalEnvironment"
         @edit-environment="editEnvironment('Global')"
@@ -225,22 +226,23 @@ const duplicateGlobalEnvironment = async () => {
           console.error(err)
 
           toast.error(t(getEnvActionErrorMessage(err)))
-          duplicateGlobalEnvironmentLoading.value = false
         },
         () => {
           toast.success(t("environment.duplicated"))
-          duplicateGlobalEnvironmentLoading.value = false
         }
       )
     )()
 
+    duplicateGlobalEnvironmentLoading.value = false
+
     return
   }
 
   createEnvironment(
     `Global - ${t("action.duplicate")}`,
     cloneDeep(getGlobalVariables())
   )
+
   toast.success(`${t("environment.duplicated")}`)
 }
 

diff --git a/packages/hoppscotch-common/src/components/environments/my/Environment.vue b/packages/hoppscotch-common/src/components/environments/my/Environment.vue
@@ -76,7 +76,7 @@
               @click="
                 () => {
                   duplicateEnvironments()
-                  hide()
+                  !showContextMenuLoadingState && hide()
                 }
               "
             />
@@ -147,9 +147,11 @@ const props = withDefaults(
     environment: Environment
     environmentIndex: number | "Global" | null
     duplicateGlobalEnvironmentLoading?: boolean
+    showContextMenuLoadingState?: boolean
   }>(),
   {
     duplicateGlobalEnvironmentLoading: false,
+    showContextMenuLoadingState: false,
   }
 )
 
@@ -166,7 +168,7 @@ watch(
   () => props.duplicateGlobalEnvironmentLoading,
   (newDuplicateGlobalEnvironmentLoadingVal) => {
     if (!newDuplicateGlobalEnvironmentLoadingVal) {
-      options.value!.tippy?.hide()
+      options?.value?.tippy?.hide()
     }
   }
 )

diff --git a/packages/hoppscotch-common/src/components/environments/teams/Environment.vue b/packages/hoppscotch-common/src/components/environments/teams/Environment.vue
@@ -48,6 +48,7 @@
               :icon="IconEdit"
               :label="`${t('action.edit')}`"
               :shortcut="['E']"
+              :disabled="duplicateEnvironmentLoading"
               @click="
                 () => {
                   emit('edit-environment')
@@ -62,19 +63,16 @@
               :icon="IconCopy"
               :label="`${t('action.duplicate')}`"
               :shortcut="['D']"
-              @click="
-                () => {
-                  duplicateEnvironments()
-                  hide()
-                }
-              "
+              :loading="duplicateEnvironmentLoading"
+              @click="duplicateEnvironmentHandler"
             />
             <HoppSmartItem
               v-if="!isViewer"
               ref="exportAsJsonEl"
               :icon="IconEdit"
               :label="`${t('export.as_json')}`"
               :shortcut="['J']"
+              :disabled="duplicateEnvironmentLoading"
               @click="
                 () => {
                   exportEnvironmentAsJSON()
@@ -88,6 +86,7 @@
               :icon="IconTrash2"
               :label="`${t('action.delete')}`"
               :shortcut="['⌫']"
+              :disabled="duplicateEnvironmentLoading"
               @click="
                 () => {
                   confirmRemove = true
@@ -100,6 +99,7 @@
               :icon="IconSettings2"
               :label="t('action.properties')"
               :shortcut="['P']"
+              :disabled="duplicateEnvironmentLoading"
               @click="
                 () => {
                   emit('show-environment-properties')
@@ -175,6 +175,8 @@ const deleteAction = ref<typeof HoppSmartItem>()
 const exportAsJsonEl = ref<typeof HoppSmartItem>()
 const propertiesAction = ref<typeof HoppSmartItem>()
 
+const duplicateEnvironmentLoading = ref(false)
+
 const removeEnvironment = () => {
   pipe(
     deleteTeamEnvironment(props.environment.id),
@@ -191,8 +193,10 @@ const removeEnvironment = () => {
   )()
 }
 
-const duplicateEnvironments = () => {
-  pipe(
+const duplicateEnvironmentHandler = async () => {
+  duplicateEnvironmentLoading.value = true
+
+  await pipe(
     duplicateEnvironment(props.environment.id),
     TE.match(
       (err: GQLError<string>) => {
@@ -204,5 +208,9 @@ const duplicateEnvironments = () => {
       }
     )
   )()
+
+  duplicateEnvironmentLoading.value = false
+
+  options.value!.tippy?.hide()
 }
 </script>