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 {