fix: expand collections + loading spinners

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

@@ -301,11 +301,7 @@
         </template>
         <template #emptyNode="{ node }">
           <HoppSmartPlaceholder
-            v-if="
-              !teamSearchResultsLoading &&
-              filterText.length !== 0 &&
-              teamCollectionList.length === 0
-            "
+            v-if="filterText.length !== 0 && teamCollectionList.length === 0"
             :text="`${t('state.nothing_found')} ‟${filterText}”`"
           >
             <template #icon>
@@ -439,11 +435,6 @@ const props = defineProps({
     default: () => [],
     required: true,
   },
-  teamSearchResultsLoading: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
   saveRequest: {
     type: Boolean,
     default: false,
@@ -814,10 +805,7 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
   getChildren(id: string | null): Ref<ChildrenResult<TeamCollectionNode>> {
     return computed(() => {
       if (id === null) {
-        if (
-          props.teamLoadingCollections.includes("root") ||
-          props.teamSearchResultsLoading
-        ) {
+        if (props.teamLoadingCollections.includes("root")) {
           return {
             status: "loading",
           }
@@ -841,13 +829,9 @@ class TeamCollectionsAdapter implements SmartTreeAdapter<TeamCollectionNode> {
       const parsedID = id.split("/")[id.split("/").length - 1]
 
       !props.teamLoadingCollections.includes(parsedID) &&
-        !props.teamSearchResultsLoading &&
         emit("expand-team-collection", parsedID)
 
-      if (
-        props.teamLoadingCollections.includes(parsedID) ||
-        props.teamSearchResultsLoading
-      ) {
+      if (props.teamLoadingCollections.includes(parsedID)) {
         return {
           status: "loading",
         }

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

@@ -60,8 +60,11 @@
       :team-collection-list="
         filterTexts.length > 0 ? teamsSearchResults : teamCollectionList
       "
-      :team-search-results-loading="teamsSearchResultsLoading"
-      :team-loading-collections="teamLoadingCollections"
+      :team-loading-collections="
+        filterTexts.length > 0
+          ? collectionsBeingLoadedFromSearch
+          : teamLoadingCollections
+      "
       :filter-text="filterTexts"
       :export-loading="exportLoading"
       :duplicate-loading="duplicateLoading"
@@ -347,10 +350,29 @@ const {
   teamsSearchResults,
   teamsSearchResultsLoading,
   expandCollection,
+  expandingCollections,
 } = useService(TeamSearchService)
 
+watch(teamsSearchResults, (newSearchResults) => {
+  if (newSearchResults.length === 1 && filterTexts.value.length > 0) {
+    expandCollection(newSearchResults[0].id)
+  }
+})
+
 const debouncedSearch = debounce(searchTeams, 400)
 
+const collectionsBeingLoadedFromSearch = computed(() => {
+  const collections = []
+
+  if (teamsSearchResultsLoading.value) {
+    collections.push("root")
+  }
+
+  collections.push(...expandingCollections.value)
+
+  return collections
+})
+
 watch(
   filterTexts,
   (newFilterText) => {
@@ -413,11 +435,6 @@ const handleCollectionClick = (payload: {
 
 const expandTeamCollection = (collectionID: string) => {
   if (filterTexts.value.length > 0 && teamsSearchResults.value) {
-    console.group("expandTeamCollection")
-    console.log(collectionID)
-
-    console.groupEnd()
-    // expandCollection(collectionID)
     return
   }
 

packages/hoppscotch-common/src/helpers/teams/TeamsSearch.service.ts

@@ -14,6 +14,12 @@ import { HoppInheritedProperty } from "../types/HoppInheritedProperties"
 import { TeamRequest } from "./TeamRequest"
 import { Service } from "dioc"
 import axios from "axios"
+import { Ref } from "vue"
+
+type CollectionSearchMeta = {
+  isSearchResult?: boolean
+  insertedWhileExpanding?: boolean
+}
 
 type CollectionSearchNode =
   | {
@@ -32,25 +38,28 @@ type CollectionSearchNode =
       path: CollectionSearchNode[]
     }
 
+type _SearchCollection = TeamCollection & {
+  parentID: string | null
+  meta?: CollectionSearchMeta
+}
+
+type _SearchRequest = {
+  id: string
+  collectionID: string
+  title: string
+  request: {
+    name: string
+    method: string
+  }
+  meta?: CollectionSearchMeta
+}
+
 function convertToTeamCollection(
-  node: CollectionSearchNode & { isSearchResult?: boolean },
-  existingCollections: Record<
-    string,
-    TeamCollection & { parentID: string | null; isSearchResult?: boolean }
-  >,
-  existingRequests: Record<
-    string,
-    {
-      id: string
-      collectionID: string
-      title: string
-      request: {
-        name: string
-        method: string
-      }
-      isSearchResult?: boolean
-    }
-  >
+  node: CollectionSearchNode & {
+    meta?: CollectionSearchMeta
+  },
+  existingCollections: Record<string, _SearchCollection>,
+  existingRequests: Record<string, _SearchRequest>
 ) {
   if (node.type === "request") {
     existingRequests[node.id] = {
@@ -61,7 +70,9 @@ function convertToTeamCollection(
         name: node.title,
         method: node.method,
       },
-      isSearchResult: node.isSearchResult,
+      meta: {
+        isSearchResult: node.meta?.isSearchResult || false,
+      },
     }
 
     if (node.path[0]) {
@@ -80,7 +91,9 @@ function convertToTeamCollection(
       requests: [],
       data: null,
       parentID: node.path[0]?.id,
-      isSearchResult: node.isSearchResult,
+      meta: {
+        isSearchResult: node.meta?.isSearchResult || false,
+      },
     }
 
     if (node.path[0]) {
@@ -167,25 +180,11 @@ export class TeamSearchService extends Service {
     }[]
   >([])
 
-  searchResultsCollections: Record<
-    string,
-    TeamCollection & { parentID: string | null; isSearchResult?: boolean }
-  > = {}
+  searchResultsCollections: Record<string, _SearchCollection> = {}
+  searchResultsRequests: Record<string, _SearchRequest> = {}
 
-  searchResultsRequests: Record<
-    string,
-    {
-      id: string
-      collectionID: string
-      title: string
-      request: {
-        name: string
-        method: string
-      }
-    }
-  > = {}
-
-  private expandingCollections: string[] = []
+  expandingCollections: Ref<string[]> = ref([])
+  expandedCollections: Ref<string[]> = ref([])
 
   // FUTURE-TODO: ideally this should return the search results / formatted results instead of directly manipulating the result set
   // eg: do the spotlight formatting in the spotlight searcher and not here
@@ -198,6 +197,7 @@ export class TeamSearchService extends Service {
 
     this.searchResultsCollections = {}
     this.searchResultsRequests = {}
+    this.expandedCollections.value = []
 
     try {
       const searchResponse = await axios.get(
@@ -219,7 +219,9 @@ export class TeamSearchService extends Service {
             convertToTeamCollection(
               {
                 ...node,
-                isSearchResult: true,
+                meta: {
+                  isSearchResult: true,
+                },
               },
               {},
               {}
@@ -442,16 +444,27 @@ export class TeamSearchService extends Service {
   }
 
   expandCollection = async (collectionID: string) => {
-    if (this.expandingCollections.includes(collectionID)) return
+    if (this.expandingCollections.value.includes(collectionID)) return
 
     const collectionToExpand = Object.values(
       this.searchResultsCollections
     ).find((col) => col.id === collectionID)
 
+    const isAlreadyExpanded =
+      this.expandedCollections.value.includes(collectionID)
+
     // only allow search result collections to be expanded
-    if (!collectionToExpand || !collectionToExpand.isSearchResult) return
+    if (
+      isAlreadyExpanded ||
+      !collectionToExpand ||
+      !(
+        collectionToExpand.meta?.isSearchResult ||
+        collectionToExpand.meta?.insertedWhileExpanding
+      )
+    )
+      return
 
-    this.expandingCollections.push(collectionID)
+    this.expandingCollections.value.push(collectionID)
 
     const childCollectionsPromise = getCollectionChildCollections(collectionID)
     const childRequestsPromise = getCollectionChildRequests(collectionID)
@@ -481,6 +494,10 @@ export class TeamSearchService extends Service {
         this.searchResultsCollections[child.id] = {
           ...child,
           parentID: collectionID,
+          meta: {
+            isSearchResult: false,
+            insertedWhileExpanding: true,
+          },
         }
       })
 
@@ -492,7 +509,13 @@ export class TeamSearchService extends Service {
         request: JSON.parse(request.request) as TeamRequest["request"],
       }))
       .forEach((request) => {
-        this.searchResultsRequests[request.id] = request
+        this.searchResultsRequests[request.id] = {
+          ...request,
+          meta: {
+            isSearchResult: false,
+            insertedWhileExpanding: true,
+          },
+        }
       })
 
     this.teamsSearchResults.value = convertToTeamTree(
@@ -502,9 +525,11 @@ export class TeamSearchService extends Service {
     )
 
     // remove the collection after expanding
-    this.expandingCollections = this.expandingCollections.filter(
+    this.expandingCollections.value = this.expandingCollections.value.filter(
       (colID) => colID !== collectionID
     )
+
+    this.expandedCollections.value.push(collectionID)
   }
 }