feat: loading state on urql actions

packages/hoppscotch-app/components/collections/index.vue

@@ -80,6 +80,7 @@
         :save-request="saveRequest"
         :collections-type="collectionsType"
         :picked="picked"
+        :loading-collection-i-ds="loadingCollectionIDs"
         @edit-collection="editCollection(collection, index)"
         @add-folder="addFolder($event)"
         @edit-folder="editFolder($event)"
@@ -95,7 +96,14 @@
       />
     </div>
     <div
-      v-if="filteredCollections.length === 0 && filterText.length === 0"
+      v-if="loadingCollectionIDs.includes('root')"
+      class="flex flex-col items-center justify-center p-4"
+    >
+      <SmartSpinner class="my-4" />
+      <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
+    </div>
+    <div
+      v-else-if="filteredCollections.length === 0 && filterText.length === 0"
       class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
       <img
@@ -258,6 +266,7 @@ export default defineComponent({
       },
       teamCollectionAdapter: new TeamCollectionAdapter(null),
       teamCollectionsNew: [],
+      loadingCollectionIDs: [],
     }
   },
   computed: {
@@ -332,6 +341,13 @@ export default defineComponent({
     this.subscribeTo(this.teamCollectionAdapter.collections$, (colls) => {
       this.teamCollectionsNew = cloneDeep(colls)
     })
+    this.subscribeTo(
+      this.teamCollectionAdapter.loadingCollections$,
+      (collectionsIDs) => {
+        console.log("loading collections", collectionsIDs)
+        this.loadingCollectionIDs = collectionsIDs
+      }
+    )
   },
   methods: {
     updateTeamCollections() {

packages/hoppscotch-app/components/collections/teams/Collection.vue

@@ -146,6 +146,7 @@
           :collections-type="collectionsType"
           :is-filtered="isFiltered"
           :picked="picked"
+          :loading-collection-i-ds="loadingCollectionIDs"
           @add-folder="$emit('add-folder', $event)"
           @edit-folder="$emit('edit-folder', $event)"
           @edit-request="$emit('edit-request', $event)"
@@ -173,7 +174,14 @@
           @duplicate-request="$emit('duplicate-request', $event)"
         />
         <div
-          v-if="
+          v-if="loadingCollectionIDs.includes(collection.id)"
+          class="flex flex-col items-center justify-center p-4"
+        >
+          <SmartSpinner class="my-4" />
+          <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
+        </div>
+        <div
+          v-else-if="
             (collection.children == undefined ||
               collection.children.length === 0) &&
             (collection.requests == undefined ||
@@ -218,6 +226,7 @@ export default defineComponent({
     saveRequest: Boolean,
     collectionsType: { type: Object, default: () => {} },
     picked: { type: Object, default: () => {} },
+    loadingCollectionIDs: { type: Array, default: () => [] },
   },
   setup() {
     const t = useI18n()

packages/hoppscotch-app/components/collections/teams/Folder.vue

@@ -126,6 +126,7 @@
           :collections-type="collectionsType"
           :folder-path="`${folderPath}/${subFolderIndex}`"
           :picked="picked"
+          :loading-collection-i-ds="loadingCollectionIDs"
           @add-folder="$emit('add-folder', $event)"
           @edit-folder="$emit('edit-folder', $event)"
           @edit-request="$emit('edit-request', $event)"
@@ -154,7 +155,14 @@
           @duplicate-request="$emit('duplicate-request', $event)"
         />
         <div
-          v-if="
+          v-if="loadingCollectionIDs.includes(folder.id)"
+          class="flex flex-col items-center justify-center p-4"
+        >
+          <SmartSpinner class="my-4" />
+          <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
+        </div>
+        <div
+          v-else-if="
             (folder.children == undefined || folder.children.length === 0) &&
             (folder.requests == undefined || folder.requests.length === 0)
           "
@@ -200,6 +208,7 @@ export default defineComponent({
     isFiltered: Boolean,
     collectionsType: { type: Object, default: () => {} },
     picked: { type: Object, default: () => {} },
+    loadingCollectionIDs: { type: Array, default: () => [] },
   },
   setup() {
     return {

packages/hoppscotch-app/components/teams/Add.vue

@@ -19,7 +19,11 @@
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="t('action.save')" @click.native="addNewTeam" />
+        <ButtonPrimary
+          :label="t('action.save')"
+          :loading="isLoading"
+          @click.native="addNewTeam"
+        />
         <ButtonSecondary
           :label="t('action.cancel')"
           @click.native="hideModal"
@@ -51,12 +55,15 @@ const emit = defineEmits<{
 
 const name = ref<string | null>(null)
 
-const addNewTeam = () =>
-  pipe(
-    TeamNameCodec.decode(name.value), // Perform decode (returns either)
-    TE.fromEither, // Convert either to a task either
-    TE.mapLeft(() => "invalid_name" as const), // Failure above is an invalid_name, give it an identifiable value
-    TE.chainW(createTeam), // Create the team
+const isLoading = ref(false)
+
+const addNewTeam = async () => {
+  isLoading.value = true
+  await pipe(
+    TeamNameCodec.decode(name.value),
+    TE.fromEither,
+    TE.mapLeft(() => "invalid_name" as const),
+    TE.chainW(createTeam),
     TE.match(
       (err) => {
         // err is of type "invalid_name" | GQLError<Err>
@@ -72,6 +79,8 @@ const addNewTeam = () =>
       }
     )
   )()
+  isLoading.value = false
+}
 
 const hideModal = () => {
   name.value = null

packages/hoppscotch-app/components/teams/Edit.vue

@@ -175,7 +175,11 @@
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="t('action.save')" @click.native="saveTeam" />
+        <ButtonPrimary
+          :label="t('action.save')"
+          :loading="isLoading"
+          @click.native="saveTeam"
+        />
         <ButtonSecondary
           :label="t('action.cancel')"
           @click.native="hideModal"
@@ -343,7 +347,10 @@ const membersList = computed(() => {
   return []
 })
 
+const isLoading = ref(false)
+
 const removeExistingTeamMember = async (userID: string) => {
+  isLoading.value = true
   const removeTeamMemberResult = await removeTeamMember(
     userID,
     props.editingTeamID
@@ -353,9 +360,11 @@ const removeExistingTeamMember = async (userID: string) => {
   } else {
     toast.success(`${t("team.member_removed")}`)
   }
+  isLoading.value = false
 }
 
 const saveTeam = async () => {
+  isLoading.value = true
   if (name.value !== "") {
     if (TeamNameCodec.is(name.value)) {
       const updateTeamNameResult = await renameTeam(
@@ -380,11 +389,12 @@ const saveTeam = async () => {
       hideModal()
       toast.success(`${t("team.saved")}`)
     } else {
-      return toast.error(`${t("team.name_length_insufficient")}`)
+      toast.error(`${t("team.name_length_insufficient")}`)
     }
   } else {
-    return toast.error(`${t("empty.team_name")}`)
+    toast.error(`${t("empty.team_name")}`)
   }
+  isLoading.value = false
 }
 
 const hideModal = () => {