Merge pull request #1070 from dpc-sdp/bugfix/R20-1615-no-result-display

[R20-1615] don't show no-results message before searching
dpc-sdp · Mar 15, 2024 · 71238c4 · 71238c4
2 parents b52de20 + b2dfc99
commit 71238c4
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/packages/ripple-tide-landing-page/components/global/TideLandingPage/ContentCollection.vue b/packages/ripple-tide-landing-page/components/global/TideLandingPage/ContentCollection.vue
@@ -4,7 +4,7 @@
     <RplContent v-if="searchState.error">
       <p>Sorry! Something went wrong. Please try again later.</p>
     </RplContent>
-    <RplContent v-else-if="!searchState.isLoading && !searchState.totalResults">
+    <RplContent v-else-if="searchComplete && !searchState.totalResults">
       <p>Sorry! We couldn't find any matches.</p>
     </RplContent>
     <div v-else>
@@ -149,7 +149,7 @@ const searchDriverOptions = {
   }
 }
 
-const { results, searchState } = await useSearchUI(
+const { results, searchState, searchComplete } = await useSearchUI(
   apiConnectorOptions,
   searchDriverOptions,
   [],

diff --git a/packages/ripple-tide-search/components/TideSearchPage.vue b/packages/ripple-tide-search/components/TideSearchPage.vue
@@ -91,7 +91,8 @@ const {
   searchTermSuggestions,
   results,
   staticFacetOptions,
-  filterFormValues
+  filterFormValues,
+  searchComplete
 } = await useSearchUI(
   apiConnectorOptions,
   props.searchDriverOptions,
@@ -300,7 +301,11 @@ watch(
             >
               <TideSearchError v-if="searchState.error" />
               <TideSearchNoResults
-                v-else-if="!searchState.isLoading && !searchState.totalResults"
+                v-else-if="
+                  searchComplete &&
+                  !searchState.isLoading &&
+                  !searchState.totalResults
+                "
                 :query="searchState.searchTerm"
               />
               <RplResultListing v-else>

diff --git a/packages/ripple-tide-search/composables/useSearchUI.ts b/packages/ripple-tide-search/composables/useSearchUI.ts
@@ -43,6 +43,7 @@ export default async (
       }, {})
     }
   })
+  const searchComplete = ref(false)
   const searchDriver = getSearchDriver(apiConnectorOptions, config)
   const searchState = ref(searchDriver.getState())
   const urlManager = ref(searchDriver.URLManager)
@@ -72,6 +73,10 @@ export default async (
   )
 
   searchDriver.subscribeToStateChanges((state: SearchState) => {
+    if (!state.isLoading && searchState.value.isLoading) {
+      searchComplete.value = true
+    }
+
     searchState.value = state
   })
 
@@ -140,6 +145,7 @@ export default async (
     searchTermSuggestions,
     results,
     staticFacetOptions,
-    filterFormValues
+    filterFormValues,
+    searchComplete
   }
 }