diff --git a/changelog/unreleased/enhancement-search-improvements b/changelog/unreleased/enhancement-search-improvements
new file mode 100644
index 00000000000..f82a2c06e64
--- /dev/null
+++ b/changelog/unreleased/enhancement-search-improvements
@@ -0,0 +1,10 @@
+Enhancement: Search improvements
+
+We've improved the search, it will show now if no results according to term was found or if the results exceeds the
+search limit.
+We've also navigate to the last page while clicking the x  in the search input field.
+
+https://github.com/owncloud/web/pull/7586
+https://github.com/owncloud/web/issues/5644
+https://github.com/owncloud/web/issues/7587
+
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 3807536222c..3b7917b0112 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -1,52 +1,59 @@
 <template>
-  <div class="files-search-result">
-    <app-bar :has-bulk-actions="true" />
-    <no-content-message v-if="!paginatedResources.length" class="files-empty" icon="folder">
-      <template #message>
-        <p class="oc-text-muted">
-          <span v-if="!!$route.query.term" v-translate>No resource found</span>
-          <span v-else v-translate>No search term entered</span>
-        </p>
+  <div class="files-search-result oc-flex">
+    <files-view-wrapper>
+      <app-bar :has-bulk-actions="false" :side-bar-open="sideBarOpen" />
+      <app-loading-spinner v-if="loading" />
+      <template v-else>
+        <no-content-message v-if="!paginatedResources.length" class="files-empty" icon="folder">
+          <template #message>
+            <p class="oc-text-muted">
+              <span v-if="!!$route.query.term" v-translate>No resource found</span>
+              <span v-else v-translate>No search term entered</span>
+            </p>
+          </template>
+        </no-content-message>
+        <resource-table
+          v-else
+          v-model="selectedResourcesIds"
+          class="files-table"
+          :class="{ 'files-table-squashed': false }"
+          :resources="paginatedResources"
+          :target-route="resourceTargetLocation"
+          :are-paths-displayed="true"
+          :are-thumbnails-displayed="displayThumbnails"
+          :has-actions="true"
+          :is-selectable="false"
+          @fileClick="$_fileActions_triggerDefaultAction"
+          @rowMounted="rowMounted"
+        >
+          <template #contextMenu="{ resource }">
+            <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
+          </template>
+          <template #footer>
+            <pagination :pages="paginationPages" :current-page="paginationPage" />
+            <div
+              v-if="searchResultExceedsLimit"
+              class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s"
+              v-text="searchResultExceedsLimitText"
+            />
+            <list-info
+              v-else-if="paginatedResources.length > 0"
+              class="oc-width-1-1 oc-my-s"
+              :files="totalFilesCount.files"
+              :folders="totalFilesCount.folders"
+              :size="totalFilesSize"
+            />
+          </template>
+        </resource-table>
       </template>
-    </no-content-message>
-    <resource-table
-      v-else
-      v-model="selectedResources"
-      class="files-table"
-      :class="{ 'files-table-squashed': false }"
-      :resources="paginatedResources"
-      :target-route="resourceTargetLocation"
-      :are-paths-displayed="true"
-      :are-thumbnails-displayed="displayThumbnails"
-      :has-actions="true"
-      :is-selectable="false"
-      @fileClick="$_fileActions_triggerDefaultAction"
-      @rowMounted="rowMounted"
-    >
-      <template #contextMenu="{ resource }">
-        <context-actions v-if="isResourceInSelection(resource)" :items="selectedResources" />
-      </template>
-      <template #footer>
-        <pagination :pages="paginationPages" :current-page="paginationPage" />
-        <div
-          v-if="searchResultExceedsLimit"
-          class="oc-text-nowrap oc-text-center oc-width-1-1 oc-my-s"
-          v-text="searchResultExceedsLimitText"
-        />
-        <list-info
-          v-else-if="paginatedResources.length > 0"
-          class="oc-width-1-1 oc-my-s"
-          :files="totalFilesCount.files"
-          :folders="totalFilesCount.folders"
-          :size="totalFilesSize"
-        />
-      </template>
-    </resource-table>
+    </files-view-wrapper>
+    <side-bar :open="sideBarOpen" :active-panel="sideBarActivePanel" />
   </div>
 </template>
 
 <script lang="ts">
 import { useResourcesViewDefaults } from '../../composables'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageType, ImageDimension } from '../../constants'
 import { createLocationSpaces } from '../../router'
@@ -65,11 +72,23 @@ import MixinFilesListScrolling from '../../mixins/filesListScrolling'
 import { searchLimit } from '../../search/sdk/list'
 import { Resource } from 'web-client'
 import { useStore } from 'web-pkg/src/composables'
+import FilesViewWrapper from '../FilesViewWrapper.vue'
+import SideBar from '../../components/SideBar/SideBar.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
 export default defineComponent({
-  components: { AppBar, ContextActions, ListInfo, Pagination, NoContentMessage, ResourceTable },
+  components: {
+    AppBar,
+    SideBar,
+    AppLoadingSpinner,
+    ContextActions,
+    ListInfo,
+    Pagination,
+    NoContentMessage,
+    ResourceTable,
+    FilesViewWrapper
+  },
   mixins: [MixinFileActions, MixinFilesListFilter, MixinFilesListScrolling],
   props: {
     searchResult: {
@@ -77,6 +96,10 @@ export default defineComponent({
       default: function () {
         return { range: null, values: [] }
       }
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   setup() {
@@ -91,7 +114,7 @@ export default defineComponent({
   },
   computed: {
     ...mapGetters(['configuration']),
-    ...mapGetters('Files', ['totalFilesCount', 'totalFilesSize']),
+    ...mapGetters('Files', ['highlightedFile', 'totalFilesCount', 'totalFilesSize']),
     displayThumbnails() {
       return !this.configuration?.options?.disablePreviews
     },
@@ -102,7 +125,7 @@ export default defineComponent({
       return this.searchResult.range
     },
     rangeItems() {
-      return this.searchResult.range?.split('/')[1]
+      return parseInt(this.searchResult.range?.split('/')[1] || 0)
     },
     searchResultExceedsLimit() {
       return !this.rangeSupported || (this.rangeItems && this.rangeItems > searchLimit)
@@ -127,6 +150,10 @@ export default defineComponent({
   watch: {
     searchResult: {
       handler: function () {
+        if (!this.searchResult) {
+          return
+        }
+
         this.CLEAR_CURRENT_FILES_LIST()
         this.LOAD_FILES({
           currentFolder: null,
diff --git a/packages/web-app-files/src/search/sdk/preview.ts b/packages/web-app-files/src/search/sdk/preview.ts
index 37f7b732d96..d32b1d7f0cc 100644
--- a/packages/web-app-files/src/search/sdk/preview.ts
+++ b/packages/web-app-files/src/search/sdk/preview.ts
@@ -9,6 +9,8 @@ import VueRouter from 'vue-router'
 import { DavProperties } from 'web-pkg/src/constants'
 import { Store } from 'vuex'
 
+export const previewSearchLimit = 5
+
 export default class Preview implements SearchPreview {
   public readonly component: Component
   private readonly cache: Cache<string, SearchResult>
@@ -42,7 +44,7 @@ export default class Preview implements SearchPreview {
     const areHiddenFilesShown = this.store.state.Files?.areHiddenFilesShown
     const { range, results } = await clientService.owncloudSdk.files.search(
       term,
-      5, // todo: add configuration option, other places need that too... needs consolidation
+      previewSearchLimit, // todo: add configuration option, other places need that too... needs consolidation
       DavProperties.Default
     )
     const resources = results.reduce((acc, plainResource) => {
@@ -59,7 +61,6 @@ export default class Preview implements SearchPreview {
 
       return acc
     }, [])
-
     return this.cache.set(term, { range, values: resources })
   }
 
diff --git a/packages/web-app-files/tests/unit/components/Search/List.spec.js b/packages/web-app-files/tests/unit/components/Search/List.spec.js
index ab9d41fcf04..bcf00f53850 100644
--- a/packages/web-app-files/tests/unit/components/Search/List.spec.js
+++ b/packages/web-app-files/tests/unit/components/Search/List.spec.js
@@ -135,6 +135,7 @@ function createStore(activeFiles) {
           selectedIds: []
         },
         getters: {
+          highlightedFile: () => activeFiles[0],
           activeFiles: () => activeFiles,
           selectedFiles: () => [],
           totalFilesCount: () => ({ files: activeFiles.length, folders: 0 }),
diff --git a/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap b/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
index c40573ab1ec..63a7467550e 100644
--- a/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
@@ -1,31 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`List component when no resource is found should show no-content-message component 1`] = `
-<div class="files-search-result">
-  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true"></app-bar-stub>
-  <div class="oc-height-1-1 oc-flex oc-flex-column oc-flex-center oc-flex-middle oc-text-center files-empty">
-    <div class="oc-icon oc-icon-xxl oc-icon-passive">
-      <!---->
+<div class="files-search-result oc-flex">
+  <div class="files-view-wrapper oc-width-expand">
+    <div id="files-view">
+      <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="" hassidebartoggle="true" hasviewoptions="true"></app-bar-stub>
+      <div class="oc-height-1-1 oc-flex oc-flex-column oc-flex-center oc-flex-middle oc-text-center files-empty">
+        <div class="oc-icon oc-icon-xxl oc-icon-passive">
+          <!---->
+        </div>
+        <div class="oc-text-muted oc-text-xlarge">
+          <p class="oc-text-muted"><span data-msgid="No search term entered" data-current-language="en_US">No search term entered</span></p>
+        </div>
+        <div class="oc-text-muted"></div>
+      </div>
     </div>
-    <div class="oc-text-muted oc-text-xlarge">
-      <p class="oc-text-muted"><span data-msgid="No search term entered" data-current-language="en_US">No search term entered</span></p>
-    </div>
-    <div class="oc-text-muted"></div>
   </div>
+  <!---->
 </div>
 `;
 
 exports[`List component when no search term is entered should show no-content-message component 1`] = `
-<div class="files-search-result">
-  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true"></app-bar-stub>
-  <div class="oc-height-1-1 oc-flex oc-flex-column oc-flex-center oc-flex-middle oc-text-center files-empty">
-    <div class="oc-icon oc-icon-xxl oc-icon-passive">
-      <!---->
-    </div>
-    <div class="oc-text-muted oc-text-xlarge">
-      <p class="oc-text-muted"><span data-msgid="No search term entered" data-current-language="en_US">No search term entered</span></p>
+<div class="files-search-result oc-flex">
+  <div class="files-view-wrapper oc-width-expand">
+    <div id="files-view">
+      <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="" hassidebartoggle="true" hasviewoptions="true"></app-bar-stub>
+      <div class="oc-height-1-1 oc-flex oc-flex-column oc-flex-center oc-flex-middle oc-text-center files-empty">
+        <div class="oc-icon oc-icon-xxl oc-icon-passive">
+          <!---->
+        </div>
+        <div class="oc-text-muted oc-text-xlarge">
+          <p class="oc-text-muted"><span data-msgid="No search term entered" data-current-language="en_US">No search term entered</span></p>
+        </div>
+        <div class="oc-text-muted"></div>
+      </div>
     </div>
-    <div class="oc-text-muted"></div>
   </div>
+  <!---->
 </div>
 `;
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index b37053186ed..858d7a2d46b 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -49,6 +49,15 @@
               :search-result="searchResultValue"
             />
           </li>
+          <li
+            v-if="showNoMatches"
+            id="no-matches"
+            class="oc-text-center oc-text-muted"
+            v-text="$gettext('No result')"
+          ></li>
+          <li v-if="showMoreMatches" id="more-matches" class="oc-text-center oc-text-muted">
+            {{ moreMatchesText }}
+          </li>
         </template>
       </ul>
     </div>
@@ -78,6 +87,32 @@ export default {
   },
 
   computed: {
+    rangeSupported() {
+      return this.searchResult.range
+    },
+
+    rangeItems() {
+      return parseInt(this.searchResult.range?.split('/')[1] || 0)
+    },
+
+    showMoreMatches() {
+      return this.rangeSupported && this.rangeItems > this.searchResult.values.length
+    },
+
+    moreMatchesText() {
+      const moreCount = this.rangeItems - this.searchResult.values.length
+      return this.$gettextInterpolate(
+        this.$ngettext('%{moreCount} more result', '%{moreCount} more results', moreCount),
+        {
+          moreCount
+        }
+      )
+    },
+
+    showNoMatches() {
+      return this.searchResult?.values?.length === 0
+    },
+
     availableProviders() {
       return this.providerStore.availableProviders
     },
@@ -88,27 +123,26 @@ export default {
   },
 
   watch: {
-    $route() {
-      if (this.activeProvider && !this.activeProvider.available) {
-        this.activeProvider = undefined
-      }
-    }
-  },
-
-  mounted() {
-    if (!this.availableProviders.length) {
-      return
-    }
-
-    const input = this.$el.getElementsByTagName('input')[0]
-    const routeTerm = get(this, '$route.query.term')
-
-    if (!input || !routeTerm) {
-      return
+    $route: {
+      handler(r, o) {
+        if (!!o && this.activeProvider && !this.activeProvider.available) {
+          this.activeProvider = undefined
+        }
+        this.$nextTick(() => {
+          if (!this.availableProviders.length) {
+            return
+          }
+          const routeTerm = get(r, 'query.term')
+          const input = this.$el.getElementsByTagName('input')[0]
+          if (!input || !routeTerm) {
+            return
+          }
+          this.term = routeTerm
+          input.value = routeTerm
+        })
+      },
+      immediate: true
     }
-
-    this.term = routeTerm
-    input.value = routeTerm
   },
 
   asyncComputed: {
@@ -153,6 +187,7 @@ export default {
     resetProvider() {
       this.optionsVisible = false
       this.availableProviders.forEach((provider) => provider.reset())
+      this.$router.go(-1)
     },
     activateProvider(provider) {
       this.optionsVisible = false
@@ -301,7 +336,6 @@ export default {
 
     li {
       padding: 15px 10px;
-      cursor: pointer;
       position: relative;
       font-size: var(--oc-font-size-small);
 
diff --git a/packages/web-app-search/src/views/List.vue b/packages/web-app-search/src/views/List.vue
index 11ff374c811..a6e72ce2f98 100644
--- a/packages/web-app-search/src/views/List.vue
+++ b/packages/web-app-search/src/views/List.vue
@@ -1,15 +1,9 @@
 <template>
-  <div class="oc-width-1-1">
-    <div
-      v-if="$asyncComputed.searchResult.updating"
-      class="oc-flex oc-flex-middle oc-flex-center oc-height-1-1 oc-width-1-1"
-    >
-      <oc-spinner size="large" :aria-hidden="true" aria-label="" />
-    </div>
-    <template v-else>
-      <component :is="listSearch.component" :search-result="searchResult" />
-    </template>
-  </div>
+  <component
+    :is="listSearch.component"
+    :search-result="searchResult"
+    :loading="$asyncComputed.searchResult.updating"
+  />
 </template>
 
 <script>
@@ -37,9 +31,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-#search-view {
-  padding: 25px 10px 10px 10px;
-}
-</style>
diff --git a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
index ebd33231393..128c8c892c5 100644
--- a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
+++ b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
@@ -52,20 +52,16 @@ afterEach(() => {
 
 describe('Search Bar portal component', () => {
   test('does not render a search field if not all requirements are fulfilled', () => {
-    wrapper = mount(SearchBar, { localVue })
+    wrapper = getMountedWrapper()
     expect(wrapper.element.innerHTML).toBeFalsy()
   })
   test('updates the search term on input', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne]
         }
       }
     })
@@ -74,35 +70,22 @@ describe('Search Bar portal component', () => {
     expect(wrapper.vm.$data.term).toBe('new')
   })
   test('the active provider get reset on route change', () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          activeProvider: { available: false }
-        }
-      },
-      mocks: {
-        $route: {
-          name: 'old'
-        }
+    wrapper = getMountedWrapper({
+      data: {
+        activeProvider: { available: false }
       }
     })
-
     expect(wrapper.vm.$data.activeProvider).toBeTruthy()
-    ;(wrapper.vm.$options.watch.$route as any).call(wrapper.vm)
+    ;(wrapper.vm.$options.watch.$route.handler as any).call(wrapper.vm, undefined, true)
     expect(wrapper.vm.$data.activeProvider).toBeFalsy()
   })
   test('notifies active provider to update term on input', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne]
         }
       }
     })
@@ -111,16 +94,12 @@ describe('Search Bar portal component', () => {
     expect(dummyProviderOne.updateTerm).toBeCalledWith('new')
   })
   test('hides options on clear', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne]
         }
       }
     })
@@ -130,16 +109,12 @@ describe('Search Bar portal component', () => {
     expect(wrapper.find('#files-global-search-options').exists()).toBeFalsy()
   })
   test('resets term on clear', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne]
         }
       }
     })
@@ -147,17 +122,28 @@ describe('Search Bar portal component', () => {
     await wrapper.find('.oc-search-clear').trigger('click')
     expect(wrapper.vm.$data.term).toBeFalsy()
   })
+  test('navigates to last route on clear', async () => {
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne]
+        }
+      }
+    })
+    const routerStub = jest.spyOn(wrapper.vm.$router, 'go')
+    await wrapper.find('input').setValue('new')
+    await wrapper.find('.oc-search-clear').trigger('click')
+    expect(routerStub).toHaveBeenCalledWith(-1)
+  })
   test('notifies active provider to reset on clear', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne]
         }
       }
     })
@@ -166,16 +152,12 @@ describe('Search Bar portal component', () => {
     expect(dummyProviderOne.reset).toBeCalledTimes(1)
   })
   test('hides options if no term given', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne]
         }
       }
     })
@@ -184,16 +166,13 @@ describe('Search Bar portal component', () => {
     expect(wrapper.find('#files-global-search-options').exists()).toBeFalsy()
   })
   test('shows options only if optionsVisible is true and a search term is given', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: false,
-          term: undefined,
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        optionsVisible: false,
+        term: undefined,
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne]
         }
       }
     })
@@ -204,16 +183,12 @@ describe('Search Bar portal component', () => {
     expect(wrapper.find('#files-global-search-options').exists()).toBeTruthy()
   })
   test('lists all available providers', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne]
         }
       }
     })
@@ -226,16 +201,12 @@ describe('Search Bar portal component', () => {
     expect(wrapper.findAll('li.provider').length).toBe(2)
   })
   test('marks the active provider as selected', () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderTwo,
-          providerStore: {
-            availableProviders: [dummyProviderOne, dummyProviderTwo]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderTwo,
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
         }
       }
     })
@@ -244,15 +215,11 @@ describe('Search Bar portal component', () => {
     expect(providers.at(1).classes()).toContain('selected')
   })
   test('activates the provider by clicking the list item', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          providerStore: {
-            availableProviders: [dummyProviderOne, dummyProviderTwo]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
         }
       }
     })
@@ -262,16 +229,12 @@ describe('Search Bar portal component', () => {
     expect(dummyProviderOne.activate).toBeCalledWith('old')
   })
   test('shows and truncates the search term on providers list item', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne, dummyProviderTwo]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
         }
       }
     })
@@ -283,16 +246,12 @@ describe('Search Bar portal component', () => {
     }
   })
   test('provider label is displayed as tag in  provider list item', () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne, dummyProviderTwo]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
         }
       }
     })
@@ -300,22 +259,17 @@ describe('Search Bar portal component', () => {
     expect(providers.at(0).get('.label').element.innerHTML).toBe(dummyProviderOne.label)
     expect(providers.at(1).get('.label').element.innerHTML).toBe(dummyProviderTwo.label)
   })
-  test.todo('shows a loading spinner if the active provider is loading')
   test('shows the preview search result from the active provider only if the provider preview is available', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: merge({}, dummyProviderOne, {
-            previewSearch: {
-              available: false
-            }
-          }),
-          providerStore: {
-            availableProviders: [dummyProviderOne, dummyProviderTwo]
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: merge({}, dummyProviderOne, {
+          previewSearch: {
+            available: false
           }
+        }),
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
         }
       }
     })
@@ -323,16 +277,12 @@ describe('Search Bar portal component', () => {
     expect(dummyProviderOne.previewSearch.search).toBeCalledTimes(0)
   })
   test('shows the preview search result from the active provider', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne, dummyProviderTwo]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
         }
       }
     })
@@ -347,17 +297,51 @@ describe('Search Bar portal component', () => {
     await wrapper.vm.$nextTick()
     expect(wrapper.findAll('li.preview').length).toBe(2)
   })
+  test('shows the no matches element if search result is empty', async () => {
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
+        }
+      }
+    })
+    dummyProviderOne.previewSearch.search.mockReturnValueOnce({
+      values: []
+    })
+    await wrapper.find('input').setValue('new')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#no-matches').exists()).toBeTruthy()
+  })
+  test('shows the more matches element if search result is empty', async () => {
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
+        }
+      }
+    })
+    dummyProviderOne.previewSearch.search.mockReturnValueOnce({
+      range: '/10',
+      values: [
+        { id: 'dummyProviderOne.1', data: 'dummyProviderOne - 1' },
+        { id: 'dummyProviderOne.2', data: 'dummyProviderOne - 2' }
+      ]
+    })
+    await wrapper.find('input').setValue('new')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#more-matches').exists()).toBeTruthy()
+  })
   test('activate a preview by clicking it', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne, dummyProviderTwo]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
         }
       }
     })
@@ -376,16 +360,12 @@ describe('Search Bar portal component', () => {
       data: 'dummyProviderOne - 2'
     })
   })
-  test('sets the search term and input term to the route value on mount', () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      data() {
-        return {
-          optionsVisible: true,
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne, dummyProviderTwo]
-          }
+  test('sets the search term and input term to the route value on mount', async () => {
+    wrapper = getMountedWrapper({
+      data: {
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
         }
       },
       mocks: {
@@ -397,21 +377,18 @@ describe('Search Bar portal component', () => {
       }
     })
 
+    await wrapper.vm.$nextTick()
+
     expect(wrapper.vm.$data.term).toBe('routeTerm')
     expect((wrapper.get('input').element as HTMLInputElement).value).toBe('routeTerm')
   })
   test("ignores events that don't belong to the SearchBar", async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      attachTo: document.body,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne, dummyProviderTwo]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
         }
       }
     })
@@ -424,17 +401,12 @@ describe('Search Bar portal component', () => {
     expect(wrapper.find('.files-global-search-options').exists()).toBeFalsy()
   })
   test('providers can be switched by using the arrow up and down keys on keyboard', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      attachTo: document.body,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne, dummyProviderTwo]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
         }
       }
     })
@@ -452,17 +424,12 @@ describe('Search Bar portal component', () => {
     expect(getClasses(0)).toContain('selected')
   })
   test('hides options on escape key press', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      attachTo: document.body,
-      data() {
-        return {
-          optionsVisible: true,
-          term: 'old',
-          activeProvider: dummyProviderOne,
-          providerStore: {
-            availableProviders: [dummyProviderOne, dummyProviderTwo]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        activeProvider: dummyProviderOne,
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
         }
       }
     })
@@ -471,15 +438,11 @@ describe('Search Bar portal component', () => {
     expect(wrapper.vm.$data.optionsVisible).toBeFalsy()
   })
   test('activate provider on enter key press', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      attachTo: document.body,
-      data() {
-        return {
-          term: 'old',
-          providerStore: {
-            availableProviders: [dummyProviderOne, dummyProviderTwo]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
         }
       }
     })
@@ -494,15 +457,11 @@ describe('Search Bar portal component', () => {
     expect(dummyProviderOne.activate).toBeCalledTimes(1)
   })
   test('activate provider on click', async () => {
-    wrapper = mount(SearchBar, {
-      localVue,
-      attachTo: document.body,
-      data() {
-        return {
-          term: 'old',
-          providerStore: {
-            availableProviders: [dummyProviderOne, dummyProviderTwo]
-          }
+    wrapper = getMountedWrapper({
+      data: {
+        term: 'old',
+        providerStore: {
+          availableProviders: [dummyProviderOne, dummyProviderTwo]
         }
       }
     })
@@ -517,3 +476,27 @@ describe('Search Bar portal component', () => {
     expect(dummyProviderOne.activate).toBeCalledTimes(1)
   })
 })
+
+function getMountedWrapper({ data = {}, mocks = {} } = {}) {
+  return mount(SearchBar, {
+    localVue,
+    attachTo: document.body,
+    data: () => {
+      return {
+        optionsVisible: true,
+        ...data
+      }
+    },
+    mocks: {
+      $gettextInterpolate: (text) => text,
+      $gettext: (text) => text,
+      $route: {
+        name: 'old'
+      },
+      $router: {
+        go: jest.fn()
+      },
+      ...mocks
+    }
+  })
+}