fix: rendering of old/wrong set of resources in search list (#9881)

changelog/unreleased/bugfix-search-list-result-rendering

@@ -0,0 +1,9 @@
+Bugfix: Prevent rendering of old/wrong set of resources in search list
+
+When entering the search, it displayed the resources from the file list for a short moment,
+this has now been fixed and the search always shows the loading spinner first.
+
+After all results have been loaded from the server, the spinner disappears and the result is rendered.
+
+https://github.com/owncloud/web/pull/9881
+https://github.com/owncloud/web/issues/9790

packages/web-app-files/src/components/Search/List.vue

@@ -366,6 +366,11 @@ export default defineComponent({
     })
 
     onMounted(async () => {
+      // Store resources are shared across table views, therefore
+      // the store state needs a reset to prevent the old list of resources
+      // from being rendered while the request retrieves the new resources from the server.
+      store.commit('Files/CLEAR_CURRENT_FILES_LIST', null)
+
       if (unref(hasTags)) {
         await loadAvailableTagsTask.perform()
       }

packages/web-app-files/tests/unit/components/Search/List.spec.ts

@@ -44,6 +44,10 @@ describe('List component', () => {
     const { wrapper } = getWrapper({ resources: [mock<Resource>()] })
     expect(wrapper.find(selectors.resourceTableStub).exists()).toBeTruthy()
   })
+  it('resets the initial store file state', () => {
+    const { storeOptions } = getWrapper({ resources: [mock<Resource>()] })
+    expect(storeOptions.modules.Files.mutations.CLEAR_CURRENT_FILES_LIST).toHaveBeenCalled()
+  })
   it('should emit search event on mount', async () => {
     const { wrapper } = getWrapper()
     await wrapper.vm.loadAvailableTagsTask.last
@@ -237,6 +241,7 @@ function getWrapper({
   })
   const store = createStore(storeOptions)
   return {
+    storeOptions,
     mocks: localMocks,
     wrapper: shallowMount(List, {
       global: {

packages/web-app-search/src/views/List.vue

@@ -24,7 +24,9 @@ export default defineComponent({
       return listSearch
     })
 
-    const loading = ref(false)
+    // The resources always have to be loaded from the server first.
+    // Therefore, the loading spinner is active by default, which prevents incorrect results from being displayed.
+    const loading = ref(true)
     const searchResult = ref({
       values: [],
       totalResults: null

packages/web-app-search/tests/unit/views/List.spec.ts

@@ -25,6 +25,10 @@ describe('search result List view', () => {
     const { wrapper } = getWrapper()
     expect(wrapper.vm.listSearch).toMatchObject(mockProvider.listSearch)
   })
+  it('by default loading is true', () => {
+    const { wrapper } = getWrapper()
+    expect(wrapper.vm.loading).toBeTruthy()
+  })
   it('triggers the search', async () => {
     const { wrapper } = getWrapper()
     await wrapper.vm.search('term')