fix(view rendering): cancel overlapping resource requests

introduce iterable generators using vue-concurrency to cancel resource
request that no longer needed.
Fixes wrong view rendering for long
running requests

changelog/unreleased/bugfix-overlapping-view-requests

@@ -0,0 +1,10 @@
+Bugfix: Fix overlapping requests in files app
+
+In some cases the files app tended to display the wrong resources when navigating quickly through the views. This happened because the resource provisioning step wasn't canceled.
+This is now fixed by using vue-concurrency which on a high level wraps iterable generators which are cancelable. We're using it to wrap the resource loading and cancel it as soon as the resource set is not needed anymore.
+
+It also improves the overall performance for the files app.
+
+https://github.com/owncloud/web/pull/5917
+https://github.com/owncloud/web/issues/5085
+https://github.com/owncloud/web/issues/5875

packages/web-app-external/src/store/index.ts

@@ -1,9 +1,16 @@
-const state = {
+import { Commit } from 'vuex'
+const State = {
   mimeTypes: {}
 }
 
 const actions = {
-  async fetchMimeTypes({ rootGetters, commit }): Promise<void> {
+  async fetchMimeTypes({
+    rootGetters,
+    commit
+  }: {
+    rootGetters: any
+    commit: Commit
+  }): Promise<void> {
     if (!rootGetters.capabilities.files.app_providers[0]?.enabled) {
       return
     }
@@ -23,20 +30,20 @@ const actions = {
 }
 
 const getters = {
-  getMimeTypes: (state) => {
+  getMimeTypes: (state: typeof State): { [key: string]: string } => {
     return state.mimeTypes
   }
 }
 
 const mutations = {
-  SET_MIME_TYPES(state, mimeTypes): void {
+  SET_MIME_TYPES(state: typeof State, mimeTypes: { [key: string]: string }): void {
     state.mimeTypes = mimeTypes
   }
 }
 
 export default {
   namespaced: true,
-  state,
+  state: State,
   actions,
   mutations,
   getters

packages/web-app-files/src/views/Favorites.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <list-loader v-if="loading" />
+    <list-loader v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <no-content-message v-if="isEmpty" id="files-favorites-empty" class="files-empty" icon="star">
         <template #message>
@@ -54,6 +54,7 @@ import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
 import debounce from 'lodash-es/debounce'
+import { useTask } from 'vue-concurrency'
 
 import QuickActions from '../components/FilesList/QuickActions.vue'
 import ListLoader from '../components/FilesList/ListLoader.vue'
@@ -76,9 +77,18 @@ export default {
     MixinFilesListFilter
   ],
 
-  data: () => ({
-    loading: true
-  }),
+  setup() {
+    const loadResourcesTask = useTask(function* (signal, ref) {
+      ref.CLEAR_CURRENT_FILES_LIST()
+
+      let resources = yield ref.$client.files.getFavoriteFiles(DavProperties.Default)
+      resources = resources.map(buildResource)
+      ref.LOAD_FILES({ currentFolder: null, files: resources })
+      ref.loadIndicators({ client: this.$client, currentFolder: '/' })
+    })
+
+    return { loadResourcesTask }
+  },
 
   computed: {
     ...mapState(['app']),
@@ -132,7 +142,7 @@ export default {
   },
 
   created() {
-    this.loadResources()
+    this.loadResourcesTask.perform(this)
     window.onresize = this.adjustTableHeaderPosition
   },
 
@@ -164,19 +174,6 @@ export default {
       }, 250)
 
       visibilityObserver.observe(component.$el, { onEnter: debounced, onExit: debounced.cancel })
-    },
-
-    async loadResources() {
-      this.loading = true
-      this.CLEAR_CURRENT_FILES_LIST()
-
-      let resources = await this.$client.files.getFavoriteFiles(DavProperties.Default)
-
-      resources = resources.map(buildResource)
-      this.LOAD_FILES({ currentFolder: null, files: resources })
-      this.loadIndicators({ client: this.$client, currentFolder: '/' })
-
-      this.loading = false
     }
   }
 }

packages/web-app-files/src/views/LocationPicker.vue

@@ -31,7 +31,7 @@
         </oc-grid>
       </div>
       <div id="files-view">
-        <list-loader v-if="loading" />
+        <list-loader v-if="navigateToTargetTask.isRunning" />
         <template v-else>
           <no-content-message
             v-if="isEmpty"
@@ -81,6 +81,7 @@ import MixinsGeneral from '../mixins'
 import MixinRoutes from '../mixins/routes'
 import MixinFilesListFilter from '../mixins/filesListFilter'
 import MixinFilesListPagination from '../mixins/filesListPagination'
+import { useTask } from 'vue-concurrency'
 
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListLoader from '../components/FilesList/ListLoader.vue'
@@ -104,10 +105,32 @@ export default {
 
   mixins: [MixinsGeneral, MixinRoutes, MixinFilesListFilter, MixinFilesListPagination],
 
+  setup() {
+    const navigateToTargetTask = useTask(function* (signal, ref, target) {
+      ref.CLEAR_CURRENT_FILES_LIST()
+
+      if (typeof target === 'object') {
+        target = ref.target
+      }
+
+      const resources = ref.isPublicContext
+        ? yield ref.$client.publicFiles.list(target, ref.publicLinkPassword, DavProperties.Default)
+        : yield ref.$client.files.list(target, 1, DavProperties.Default)
+
+      ref.loadFiles({ currentFolder: resources[0], files: resources.slice(1) })
+      ref.loadIndicators({
+        client: ref.$client,
+        currentFolder: ref.$route.params.item || '/'
+      })
+      ref.adjustTableHeaderPosition()
+    }).restartable()
+
+    return { navigateToTargetTask }
+  },
+
   data: () => ({
     headerPosition: 0,
-    originalLocation: '',
-    loading: true
+    originalLocation: ''
   }),
 
   computed: {
@@ -250,7 +273,7 @@ export default {
         const sameRoute = to.name === from?.name
         const sameItem = to.params?.item === from?.params?.item
         if (!sameRoute || !sameItem) {
-          this.navigateToTarget(this.$route)
+          this.navigateToTargetTask.perform(this, this.$route)
         }
 
         this.$_filesListPagination_updateCurrentPage()
@@ -297,31 +320,6 @@ export default {
       })
     },
 
-    async navigateToTarget(target) {
-      this.loading = true
-      this.CLEAR_CURRENT_FILES_LIST()
-
-      if (typeof target === 'object') {
-        target = this.target
-      }
-
-      const resources = this.isPublicContext
-        ? await this.$client.publicFiles.list(
-            target,
-            this.publicLinkPassword,
-            DavProperties.Default
-          )
-        : await this.$client.files.list(target, 1, DavProperties.Default)
-
-      this.loadFiles({ currentFolder: resources[0], files: resources.slice(1) })
-      this.loadIndicators({
-        client: this.$client,
-        currentFolder: this.$route.params.item || '/'
-      })
-      this.adjustTableHeaderPosition()
-      this.loading = false
-    },
-
     leaveLocationPicker(target) {
       if (this.isPublicContext) {
         this.$router.push({ name: 'files-public-list', params: { item: target } })

packages/web-app-files/src/views/Personal.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <list-loader v-if="loading" />
+    <list-loader v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <not-found-message v-if="folderNotFound" class="files-not-found uk-height-1-1" />
       <no-content-message
@@ -73,6 +73,7 @@ import { buildResource } from '../helpers/resources'
 import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../constants'
 import { bus } from 'web-pkg/src/instance'
+import { useTask } from 'vue-concurrency'
 
 import QuickActions from '../components/FilesList/QuickActions.vue'
 import ListLoader from '../components/FilesList/ListLoader.vue'
@@ -107,10 +108,44 @@ export default {
     MixinMountSideBar,
     MixinFilesListFilter
   ],
+  setup() {
+    const loadResourcesTask = useTask(function* (signal, ref, sameRoute, path = null) {
+      ref.CLEAR_CURRENT_FILES_LIST()
 
-  data: () => ({
-    loading: true
-  }),
+      try {
+        let resources = yield ref.fetchResources(
+          path || ref.$route.params.item,
+          DavProperties.Default
+        )
+        resources = resources.map(buildResource)
+
+        const currentFolder = resources.shift()
+
+        ref.LOAD_FILES({
+          currentFolder,
+          files: resources
+        })
+        ref.loadIndicators({
+          client: ref.$client,
+          currentFolder: currentFolder.path
+        })
+
+        // Load quota
+        const user = yield ref.$client.users.getUser(ref.user.id)
+
+        ref.SET_QUOTA(user.quota)
+      } catch (error) {
+        ref.SET_CURRENT_FOLDER(null)
+        console.error(error)
+      }
+
+      ref.adjustTableHeaderPosition()
+      ref.accessibleBreadcrumb_focusAndAnnounceBreadcrumb(sameRoute)
+      ref.scrollToResourceFromRoute()
+    }).restartable()
+
+    return { loadResourcesTask }
+  },
 
   computed: {
     ...mapState(['app']),
@@ -191,7 +226,7 @@ export default {
         this.$_filesListPagination_updateCurrentPage()
 
         if (!sameRoute || !sameItem) {
-          this.loadResources(sameRoute)
+          this.loadResourcesTask.perform(this, sameRoute)
         }
       },
       immediate: true
@@ -208,7 +243,7 @@ export default {
 
   mounted() {
     const loadResourcesEventToken = bus.subscribe('app.files.list.load', (path) => {
-      this.loadResources(this.$route.params.item === path, path)
+      this.loadResourcesTask.perform(this, this.$route.params.item === path, path)
     })
 
     this.$on('beforeDestroy', () => bus.unsubscribe('app.files.list.load', loadResourcesEventToken))
@@ -336,43 +371,6 @@ export default {
         console.error(error)
       }
     },
-    async loadResources(sameRoute, path = null) {
-      this.loading = true
-      this.CLEAR_CURRENT_FILES_LIST()
-
-      try {
-        let resources = await this.fetchResources(
-          path || this.$route.params.item,
-          DavProperties.Default
-        )
-        resources = resources.map(buildResource)
-
-        const currentFolder = resources.shift()
-
-        this.LOAD_FILES({
-          currentFolder,
-          files: resources
-        })
-        this.loadIndicators({
-          client: this.$client,
-          currentFolder: currentFolder.path
-        })
-
-        // Load quota
-        const user = await this.$client.users.getUser(this.user.id)
-
-        this.SET_QUOTA(user.quota)
-      } catch (error) {
-        this.SET_CURRENT_FOLDER(null)
-        console.error(error)
-      }
-
-      this.adjustTableHeaderPosition()
-      this.loading = false
-      this.accessibleBreadcrumb_focusAndAnnounceBreadcrumb(sameRoute)
-      this.scrollToResourceFromRoute()
-    },
-
     scrollToResourceFromRoute() {
       const resourceName = this.$route.query.scrollTo