fix: race condition in active team collection tab inheritance (#5184)

Co-authored-by: Mayank <mayank@Mayanks-MacBook-Pro.local>
Co-authored-by: nivedin <nivedinp@gmail.com>

packages/hoppscotch-common/src/components/collections/index.vue

@@ -3060,6 +3060,14 @@ const setCollectionProperties = (newCollection: {
       headers: collection.headers,
       variables: collection.variables,
     }
+
+    // Mark as loading BEFORE triggering async update to avoid race conditions and push the collectionId to the loading array
+    if (
+      !teamCollectionService.loadingCollections.value.includes(collectionId)
+    ) {
+      teamCollectionService.loadingCollections.value.push(collectionId)
+    }
+
     pipe(
       updateTeamCollection(collectionId, JSON.stringify(data), undefined),
       TE.match(
@@ -3068,15 +3076,12 @@ const setCollectionProperties = (newCollection: {
         },
         () => {
           toast.success(t("collection.properties_updated"))
+
+          // The team collection service needs to know the path of the collection that was updated
+          teamCollectionService.pendingTeamCollectionPath.value = path
         }
       )
     )()
-
-    //This is a hack to update the inherited properties of the requests if there an tab opened
-    // since it takes a little bit of time to update the collection tree
-    setTimeout(() => {
-      updateInheritedPropertiesForAffectedRequests(path, "rest")
-    }, 300)
   }
 
   displayModalEditProperties(false)

packages/hoppscotch-common/src/services/team-collection.service.ts

@@ -34,6 +34,7 @@ import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 import { WorkspaceService } from "./workspace.service"
 import { ref, watch } from "vue"
 import { Service } from "dioc"
+import { updateInheritedPropertiesForAffectedRequests } from "~/helpers/collection/collection"
 
 export const TEAMS_BACKEND_PAGE_SIZE = 10
 
@@ -144,6 +145,7 @@ export class TeamCollectionsService extends Service<void> {
 
   public collections = ref<TeamCollection[]>([])
   public loadingCollections = ref<string[]>([])
+  public pendingTeamCollectionPath = ref<string | null>(null)
 
   private entityIDs: Set<string> = new Set()
 
@@ -186,6 +188,24 @@ export class TeamCollectionsService extends Service<void> {
       },
       { immediate: true, deep: true }
     )
+
+    // Watch for completion of loading (when all loading flags are cleared) to update inherited properties once
+    watch(
+      () => this.loadingCollections.value.length,
+      (loadingCount) => {
+        if (
+          loadingCount === 0 &&
+          this.pendingTeamCollectionPath.value &&
+          this.collections.value.length > 0
+        ) {
+          updateInheritedPropertiesForAffectedRequests(
+            this.pendingTeamCollectionPath.value,
+            "rest"
+          )
+          this.pendingTeamCollectionPath.value = null
+        }
+      }
+    )
   }
 
   changeTeamID(newTeamID: string | null) {
@@ -688,6 +708,10 @@ export class TeamCollectionsService extends Service<void> {
         title: result.right.teamCollectionUpdated.title,
         data: result.right.teamCollectionUpdated.data,
       })
+
+      this.loadingCollections.value = this.loadingCollections.value.filter(
+        (x) => x !== result.right.teamCollectionUpdated.id
+      )
     })
 
     const [teamCollRemoved$, teamCollRemovedSub] = runGQLSubscription({