1 files changed, 17 insertions, 16 deletions
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
index 157068b2c0f..e7923e0b55e 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
@@ -76,9 +76,10 @@ export default {
   },
   data() {
     return {
+      hasFetched: false, // use this to avoid flash of `No suggestions found` before fetching
       searchKey: '',
       recentSuggestions: this.config.recentSuggestionsStorageKey
-        ? getRecentlyUsedSuggestions(this.config.recentSuggestionsStorageKey)
+        ? getRecentlyUsedSuggestions(this.config.recentSuggestionsStorageKey) ?? []
         : [],
     };
   },
@@ -86,6 +87,9 @@ export default {
     isRecentSuggestionsEnabled() {
       return Boolean(this.config.recentSuggestionsStorageKey);
     },
+    suggestionsEnabled() {
+      return !this.config.suggestionsDisabled;
+    },
     recentTokenIds() {
       return this.recentSuggestions.map((tokenValue) => tokenValue[this.valueIdentifier]);
     },
@@ -134,17 +138,6 @@ export default {
     showAvailableSuggestions() {
       return this.availableSuggestions.length > 0;
     },
-    showSuggestions() {
-      // These conditions must match the template under `#suggestions` slot
-      // See https://gitlab.com/gitlab-org/gitlab/-/merge_requests/65817#note_632619411
-      return (
-        this.showDefaultSuggestions ||
-        this.showRecentSuggestions ||
-        this.showPreloadedSuggestions ||
-        this.suggestionsLoading ||
-        this.showAvailableSuggestions
-      );
-    },
     searchTerm() {
       return this.searchBy && this.activeTokenValue
         ? this.activeTokenValue[this.searchBy]
@@ -161,6 +154,13 @@ export default {
         }
       },
     },
+    suggestionsLoading: {
+      handler(loading) {
+        if (loading) {
+          this.hasFetched = true;
+        }
+      },
+    },
   },
   methods: {
     handleInput: debounce(function debouncedSearch({ data, operator }) {
@@ -216,7 +216,7 @@ export default {
     <template #view="viewTokenProps">
       <slot name="view" :view-token-props="{ ...viewTokenProps, activeTokenValue }"></slot>
     </template>
-    <template v-if="showSuggestions" #suggestions>
+    <template v-if="suggestionsEnabled" #suggestions>
       <template v-if="showDefaultSuggestions">
         <gl-filtered-search-suggestion
           v-for="token in availableDefaultSuggestions"
@@ -238,12 +238,13 @@ export default {
         :suggestions="preloadedSuggestions"
       ></slot>
       <gl-loading-icon v-if="suggestionsLoading" size="sm" />
+      <template v-else-if="showAvailableSuggestions">
+        <slot name="suggestions-list" :suggestions="availableSuggestions"></slot>
+      </template>
       <gl-dropdown-text v-else-if="showNoMatchesText">
         {{ __('No matches found') }}
       </gl-dropdown-text>
-      <template v-else>
-        <slot name="suggestions-list" :suggestions="availableSuggestions"></slot>
-      </template>
+      <gl-dropdown-text v-else-if="hasFetched">{{ __('No suggestions found') }}</gl-dropdown-text>
     </template>
   </gl-filtered-search-token>
 </template>