fix: avoid no-results message blink

src/components/desktop/desktop.vue

@@ -9,11 +9,7 @@
             <LocationProvider location="results">
               <SpellcheckMessage class="x-mb-16" data-test="spellcheck-message" />
             </LocationProvider>
-            <NoResultsMessage
-              v-if="showNoResultsMessage"
-              class="x-mb-16"
-              data-test="no-results-message"
-            />
+            <NoResultsMessage class="x-mb-16" data-test="no-results-message" />
             <FallbackDisclaimerMessage class="x-mb-16" />
           </div>
 
@@ -56,9 +52,9 @@
 </template>
 
 <script lang="ts">
-import { animateTranslate, BaseIdModal, LocationProvider, useState } from '@empathyco/x-components'
+import { animateTranslate, BaseIdModal, LocationProvider } from '@empathyco/x-components'
 import { MainScroll, Scroll } from '@empathyco/x-components/scroll'
-import { computed, defineAsyncComponent, defineComponent } from 'vue'
+import { defineAsyncComponent, defineComponent } from 'vue'
 import { useHasSearched } from '../../composables/use-has-searched.composable'
 import MainComponent from '../main.vue'
 import MaxDesktopWidthItem from '../max-desktop-width-item.vue'
@@ -93,14 +89,10 @@ export default defineComponent({
   setup() {
     const rightAsideAnimation = animateTranslate('right')
     const { hasSearched } = useHasSearched()
-    const { relatedPrompts } = useState('relatedPrompts', ['relatedPrompts'])
-
-    const showNoResultsMessage = computed(() => !relatedPrompts.value?.length)
 
     return {
       hasSearched,
       rightAsideAnimation,
-      showNoResultsMessage,
     }
   },
 })

src/components/search/no-results-message.vue

@@ -1,6 +1,6 @@
 <template>
   <i18n-t
-    v-if="x.noResults"
+    v-if="showNoResultsMessage"
     class="x-no-results-message x-text1 x-message desktop:x-text1-lg desktop:x-mt-24"
     keypath="noResults.message"
     :class="{ 'x-flex-col': isTabletOrLess }"
@@ -14,17 +14,23 @@
 </template>
 
 <script lang="ts">
-import { use$x } from '@empathyco/x-components'
-import { defineComponent } from 'vue'
+import { use$x, useState } from '@empathyco/x-components'
+import { computed, defineComponent } from 'vue'
 import { useDevice } from '../../composables/use-device.composable'
 
 export default defineComponent({
   setup() {
+    const x = use$x()
     const { isTabletOrLess } = useDevice()
+    const { relatedPrompts } = useState('relatedPrompts', ['relatedPrompts'])
+    const showNoResultsMessage = computed(
+      () => x.noResults && !relatedPrompts.value?.length && !x.semanticQueries.length,
+    )
 
     return {
       isTabletOrLess,
-      x: use$x(),
+      showNoResultsMessage,
+      x,
     }
   },
 })