From b24fab0be947a676ec3964e3a14cfc4bea40fbe7 Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Fri, 15 Oct 2021 14:30:20 +0200
Subject: [PATCH 1/2] 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
---
 .../bugfix-overlapping-view-requests          | 10 ++
 packages/web-app-external/src/store/index.ts  | 17 +++-
 .../web-app-files/src/views/Favorites.vue     | 33 +++----
 .../src/views/LocationPicker.vue              | 56 ++++++-----
 packages/web-app-files/src/views/Personal.vue | 84 ++++++++---------
 .../web-app-files/src/views/PublicFiles.vue   | 93 +++++++++----------
 .../web-app-files/src/views/SharedViaLink.vue | 63 ++++++-------
 .../web-app-files/src/views/SharedWithMe.vue  | 63 ++++++-------
 .../src/views/SharedWithOthers.vue            | 63 +++++++------
 packages/web-app-files/src/views/Trashbin.vue | 39 ++++----
 .../tests/unit/views/Favorites.spec.js        |  7 +-
 .../tests/unit/views/Personal.spec.js         | 12 ++-
 .../tests/unit/views/SharedWithMe.spec.js     |  7 +-
 .../tests/unit/views/views.setup.js           |  2 +
 packages/web-runtime/package.json             |  2 +
 packages/web-runtime/src/defaults/vue.js      |  2 +
 yarn.lock                                     | 47 +++++++++-
 17 files changed, 331 insertions(+), 269 deletions(-)
 create mode 100644 changelog/unreleased/bugfix-overlapping-view-requests

diff --git a/changelog/unreleased/bugfix-overlapping-view-requests b/changelog/unreleased/bugfix-overlapping-view-requests
new file mode 100644
index 00000000000..93d19ba290f
--- /dev/null
+++ b/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
diff --git a/packages/web-app-external/src/store/index.ts b/packages/web-app-external/src/store/index.ts
index 9149fceee38..65c510679c7 100644
--- a/packages/web-app-external/src/store/index.ts
+++ b/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
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index 9c3d764db41..e9ea12e4b0b 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/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
     }
   }
 }
diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
index 41ccb1c0d8d..265fe654b0f 100644
--- a/packages/web-app-files/src/views/LocationPicker.vue
+++ b/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 } })
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index c7e28442d83..6bfd6c29ac7 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/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
 
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index 196a177b3af..f534ade2dd6 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.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
@@ -61,6 +61,7 @@ import { ImageDimension, ImageType } from '../constants'
 import debounce from 'lodash-es/debounce'
 import { buildResource } from '../helpers/resources'
 import { bus } from 'web-pkg/src/instance'
+import { useTask } from 'vue-concurrency'
 
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
@@ -89,9 +90,48 @@ export default {
     MixinMountSideBar
   ],
 
-  data: () => ({
-    loading: true
-  }),
+  setup() {
+    const loadResourcesTask = useTask(function* (signal, ref, sameRoute, path = null) {
+      ref.CLEAR_CURRENT_FILES_LIST()
+
+      try {
+        let resources = yield ref.$client.publicFiles.list(
+          path || ref.$route.params.item,
+          ref.publicLinkPassword,
+          DavProperties.PublicLink
+        )
+
+        // Redirect to files drop if the link has role "uploader"
+        if (resources[0].getProperty(ref.$client.publicFiles.PUBLIC_LINK_PERMISSION) === '4') {
+          ref.$router.push({
+            name: 'files-public-link',
+            params: {
+              token: ref.$route.params.item
+            }
+          })
+
+          return
+        }
+
+        resources = resources.map(buildResource)
+        ref.LOAD_FILES({ currentFolder: resources[0], files: resources.slice(1) })
+
+        ref.adjustTableHeaderPosition()
+        window.onresize = ref.adjustTableHeaderPosition
+      } catch (error) {
+        ref.SET_CURRENT_FOLDER(null)
+        console.error(error)
+
+        if (error.statusCode === 401) {
+          ref.redirectToResolvePage()
+        }
+      }
+
+      ref.accessibleBreadcrumb_focusAndAnnounceBreadcrumb(sameRoute)
+    }).restartable()
+
+    return { loadResourcesTask }
+  },
 
   computed: {
     ...mapGetters('Files', [
@@ -144,7 +184,7 @@ export default {
         const sameRoute = to.name === from?.name
         const sameItem = to.params?.item === from?.params?.item
         if (!sameRoute || !sameItem) {
-          this.loadResources(sameRoute)
+          this.loadResourcesTask.perform(this, sameRoute)
         }
 
         this.$_filesListPagination_updateCurrentPage()
@@ -162,7 +202,7 @@ export default {
 
   created() {
     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))
@@ -195,47 +235,6 @@ export default {
       visibilityObserver.observe(component.$el, { onEnter: debounced, onExit: debounced.cancel })
     },
 
-    async loadResources(sameRoute, path = null) {
-      this.loading = true
-      this.CLEAR_CURRENT_FILES_LIST()
-
-      try {
-        let resources = await this.$client.publicFiles.list(
-          path || this.$route.params.item,
-          this.publicLinkPassword,
-          DavProperties.PublicLink
-        )
-
-        // Redirect to files drop if the link has role "uploader"
-        if (resources[0].getProperty(this.$client.publicFiles.PUBLIC_LINK_PERMISSION) === '4') {
-          this.$router.push({
-            name: 'files-public-link',
-            params: {
-              token: this.$route.params.item
-            }
-          })
-
-          return
-        }
-
-        resources = resources.map(buildResource)
-        this.LOAD_FILES({ currentFolder: resources[0], files: resources.slice(1) })
-
-        this.adjustTableHeaderPosition()
-        window.onresize = this.adjustTableHeaderPosition
-      } catch (error) {
-        this.SET_CURRENT_FOLDER(null)
-        console.error(error)
-
-        if (error.statusCode === 401) {
-          this.redirectToResolvePage()
-        }
-      }
-
-      this.loading = false
-      this.accessibleBreadcrumb_focusAndAnnounceBreadcrumb(sameRoute)
-    },
-
     redirectToResolvePage() {
       this.$router.push({
         name: 'files-public-link',
diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
index 3148afa44e9..8d341d0ac61 100644
--- a/packages/web-app-files/src/views/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/SharedViaLink.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"
@@ -55,6 +55,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 ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
@@ -76,9 +77,33 @@ export default {
     MixinFilesListFilter
   ],
 
-  data: () => ({
-    loading: true
-  }),
+  setup() {
+    const loadResourcesTask = useTask(function* (signal, ref) {
+      ref.CLEAR_CURRENT_FILES_LIST()
+      let resources = yield ref.$client.requests.ocs({
+        service: 'apps/files_sharing',
+        action: '/api/v1/shares?format=json&share_types=3&include_tags=false',
+        method: 'GET'
+      })
+
+      resources = yield resources.json()
+      resources = resources.ocs.data
+
+      if (resources.length) {
+        resources = aggregateResourceShares(
+          resources,
+          false,
+          !ref.isOcis,
+          ref.configuration.server,
+          ref.getToken
+        )
+      }
+
+      ref.LOAD_FILES({ currentFolder: null, files: resources })
+    })
+
+    return { loadResourcesTask }
+  },
 
   computed: {
     ...mapState(['app']),
@@ -131,7 +156,7 @@ export default {
   },
 
   created() {
-    this.loadResources()
+    this.loadResourcesTask.perform(this)
     window.onresize = this.adjustTableHeaderPosition
   },
 
@@ -163,34 +188,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.requests.ocs({
-        service: 'apps/files_sharing',
-        action: '/api/v1/shares?format=json&share_types=3&include_tags=false',
-        method: 'GET'
-      })
-
-      resources = await resources.json()
-      resources = resources.ocs.data
-
-      if (resources.length) {
-        resources = aggregateResourceShares(
-          resources,
-          false,
-          !this.isOcis,
-          this.configuration.server,
-          this.getToken
-        )
-      }
-
-      this.LOAD_FILES({ currentFolder: null, files: resources })
-
-      this.loading = false
     }
   }
 }
diff --git a/packages/web-app-files/src/views/SharedWithMe.vue b/packages/web-app-files/src/views/SharedWithMe.vue
index b0f5cefeac2..9eaf038cdb3 100644
--- a/packages/web-app-files/src/views/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/SharedWithMe.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="uk-flex uk-flex-column">
-    <list-loader v-if="loading" />
+    <list-loader v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <!-- Pending shares -->
       <div v-if="hasPending">
@@ -165,6 +165,7 @@ import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
 import ContextActions from '../components/FilesList/ContextActions.vue'
+import { useTask } from 'vue-concurrency'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -185,8 +186,36 @@ export default {
     MixinFilesListFilter
   ],
 
+  setup() {
+    const loadResourcesTask = useTask(function* (signal, ref) {
+      ref.CLEAR_CURRENT_FILES_LIST()
+
+      let resources = yield ref.$client.requests.ocs({
+        service: 'apps/files_sharing',
+        action: '/api/v1/shares?format=json&shared_with_me=true&state=all&include_tags=false',
+        method: 'GET'
+      })
+
+      resources = yield resources.json()
+      resources = resources.ocs.data
+
+      if (resources.length) {
+        resources = aggregateResourceShares(
+          resources,
+          true,
+          !ref.isOcis,
+          ref.configuration.server,
+          ref.getToken
+        )
+      }
+
+      ref.LOAD_FILES({ currentFolder: null, files: resources })
+    })
+
+    return { loadResourcesTask }
+  },
+
   data: () => ({
-    loading: true,
     shareStatus,
     showMorePending: false
   }),
@@ -307,7 +336,7 @@ export default {
   },
 
   created() {
-    this.loadResources()
+    this.loadResourcesTask.perform(this)
     window.onresize = this.adjustTableHeaderPosition
   },
 
@@ -352,34 +381,6 @@ export default {
       })
     },
 
-    async loadResources() {
-      this.loading = true
-      this.CLEAR_CURRENT_FILES_LIST()
-
-      let resources = await this.$client.requests.ocs({
-        service: 'apps/files_sharing',
-        action: '/api/v1/shares?format=json&shared_with_me=true&state=all&include_tags=false',
-        method: 'GET'
-      })
-
-      resources = await resources.json()
-      resources = resources.ocs.data
-
-      if (resources.length) {
-        resources = aggregateResourceShares(
-          resources,
-          true,
-          !this.isOcis,
-          this.configuration.server,
-          this.getToken
-        )
-      }
-
-      this.LOAD_FILES({ currentFolder: null, files: resources })
-
-      this.loading = false
-    },
-
     togglePendingShowMore() {
       this.showMorePending = !this.showMorePending
     }
diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
index ae80238680b..4e131a481eb 100644
--- a/packages/web-app-files/src/views/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/SharedWithOthers.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"
@@ -57,6 +57,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 ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
@@ -78,9 +79,34 @@ export default {
     MixinFilesListFilter
   ],
 
-  data: () => ({
-    loading: true
-  }),
+  setup() {
+    const loadResourcesTask = useTask(function* (signal, ref) {
+      ref.CLEAR_CURRENT_FILES_LIST()
+
+      let resources = yield ref.$client.requests.ocs({
+        service: 'apps/files_sharing',
+        action: '/api/v1/shares?format=json&reshares=true&include_tags=false',
+        method: 'GET'
+      })
+
+      resources = yield resources.json()
+      resources = resources.ocs.data
+
+      if (resources.length) {
+        resources = aggregateResourceShares(
+          resources,
+          false,
+          !ref.isOcis,
+          ref.configuration.server,
+          ref.getToken
+        )
+      }
+
+      ref.LOAD_FILES({ currentFolder: null, files: resources })
+    })
+
+    return { loadResourcesTask }
+  },
 
   computed: {
     ...mapState(['app']),
@@ -133,7 +159,7 @@ export default {
   },
 
   created() {
-    this.loadResources()
+    this.loadResourcesTask.perform(this)
     window.onresize = this.adjustTableHeaderPosition
   },
 
@@ -174,33 +200,6 @@ export default {
       visibilityObserver.observe(component.$el, { onEnter: debounced, onExit: debounced.cancel })
     },
 
-    async loadResources() {
-      this.loading = true
-      this.CLEAR_CURRENT_FILES_LIST()
-
-      let resources = await this.$client.requests.ocs({
-        service: 'apps/files_sharing',
-        action: '/api/v1/shares?format=json&reshares=true&include_tags=false',
-        method: 'GET'
-      })
-
-      resources = await resources.json()
-      resources = resources.ocs.data
-
-      if (resources.length) {
-        resources = aggregateResourceShares(
-          resources,
-          false,
-          !this.isOcis,
-          this.configuration.server,
-          this.getToken
-        )
-      }
-
-      this.LOAD_FILES({ currentFolder: null, files: resources })
-      this.loading = false
-    },
-
     shareStatus(status) {
       if (status === 0) {
         return this.$gettext('Accepted')
diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
index c6e54a7ed3e..294dc09b107 100644
--- a/packages/web-app-files/src/views/Trashbin.vue
+++ b/packages/web-app-files/src/views/Trashbin.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"
@@ -50,6 +50,7 @@ import MixinFilesListPositioning from '../mixins/filesListPositioning'
 import MixinResources from '../mixins/resources'
 import MixinFilesListPagination from '../mixins/filesListPagination'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
+import { useTask } from 'vue-concurrency'
 
 import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
@@ -69,9 +70,21 @@ export default {
     MixinFilesListFilter
   ],
 
-  data: () => ({
-    loading: true
-  }),
+  setup() {
+    const loadResourcesTask = useTask(function* (signal, ref) {
+      ref.CLEAR_CURRENT_FILES_LIST()
+
+      const resources = yield ref.$client.fileTrash.list('', '1', DavProperties.Trashbin)
+
+      ref.LOAD_FILES({
+        currentFolder: buildResource(resources[0]),
+        files: resources.slice(1).map(buildDeletedResource)
+      })
+      ref.adjustTableHeaderPosition()
+    })
+
+    return { loadResourcesTask }
+  },
 
   computed: {
     ...mapState('Files', ['files']),
@@ -114,7 +127,7 @@ export default {
   },
 
   created() {
-    this.loadResources()
+    this.loadResourcesTask.perform(this)
     window.onresize = this.adjustTableHeaderPosition
   },
 
@@ -123,21 +136,7 @@ export default {
   },
 
   methods: {
-    ...mapMutations('Files', ['LOAD_FILES', 'SET_FILE_SELECTION', 'CLEAR_CURRENT_FILES_LIST']),
-
-    async loadResources() {
-      this.loading = true
-      this.CLEAR_CURRENT_FILES_LIST()
-
-      const resources = await this.$client.fileTrash.list('', '1', DavProperties.Trashbin)
-
-      this.LOAD_FILES({
-        currentFolder: buildResource(resources[0]),
-        files: resources.slice(1).map(buildDeletedResource)
-      })
-      this.adjustTableHeaderPosition()
-      this.loading = false
-    }
+    ...mapMutations('Files', ['LOAD_FILES', 'SET_FILE_SELECTION', 'CLEAR_CURRENT_FILES_LIST'])
   }
 }
 </script>
diff --git a/packages/web-app-files/tests/unit/views/Favorites.spec.js b/packages/web-app-files/tests/unit/views/Favorites.spec.js
index 95d447f8890..f597052be65 100644
--- a/packages/web-app-files/tests/unit/views/Favorites.spec.js
+++ b/packages/web-app-files/tests/unit/views/Favorites.spec.js
@@ -209,8 +209,11 @@ function mountOptions({
         query: { page: 1 }
       }
     },
-    data: () => ({
-      loading: loading
+    setup: () => ({
+      loadResourcesTask: {
+        isRunning: loading,
+        perform: jest.fn()
+      }
     })
   }
 }
diff --git a/packages/web-app-files/tests/unit/views/Personal.spec.js b/packages/web-app-files/tests/unit/views/Personal.spec.js
index 72c6353928f..4869d5f3c6f 100644
--- a/packages/web-app-files/tests/unit/views/Personal.spec.js
+++ b/packages/web-app-files/tests/unit/views/Personal.spec.js
@@ -96,7 +96,12 @@ const resourcesFolders = [resourceDocumentsFolder, resourcePdfsFolder]
 const resources = [...resourcesFiles, ...resourcesFolders]
 
 function createWrapper(selectedFiles = [resourceForestJpg]) {
-  jest.spyOn(Personal.methods, 'loadResources').mockImplementation()
+  jest.spyOn(Personal, 'setup').mockImplementation(() => ({
+    loadResourcesTask: {
+      isRunning: false,
+      perform: jest.fn()
+    }
+  }))
   jest
     .spyOn(MixinAccessibleBreadcrumb.methods, 'accessibleBreadcrumb_focusAndAnnounceBreadcrumb')
     .mockImplementation()
@@ -172,10 +177,7 @@ function createWrapper(selectedFiles = [resourceForestJpg]) {
     }),
     localVue,
     router,
-    stubs: stubs,
-    data: () => ({
-      loading: false
-    })
+    stubs: stubs
   })
 }
 
diff --git a/packages/web-app-files/tests/unit/views/SharedWithMe.spec.js b/packages/web-app-files/tests/unit/views/SharedWithMe.spec.js
index ea388d8f134..b8dbc8738ab 100644
--- a/packages/web-app-files/tests/unit/views/SharedWithMe.spec.js
+++ b/packages/web-app-files/tests/unit/views/SharedWithMe.spec.js
@@ -185,8 +185,11 @@ function mountOptions({
         query: { page: 1, 'view-mode': viewMode }
       }
     },
-    data: () => ({
-      loading
+    setup: () => ({
+      loadResourcesTask: {
+        isRunning: loading,
+        perform: jest.fn()
+      }
     })
   }
 }
diff --git a/packages/web-app-files/tests/unit/views/views.setup.js b/packages/web-app-files/tests/unit/views/views.setup.js
index ff604ffee64..7f554b40e63 100644
--- a/packages/web-app-files/tests/unit/views/views.setup.js
+++ b/packages/web-app-files/tests/unit/views/views.setup.js
@@ -4,6 +4,7 @@ import OwnCloud from 'owncloud-sdk'
 import { createStore } from 'vuex-extensions'
 import DesignSystem from 'owncloud-design-system'
 import GetTextPlugin from 'vue-gettext'
+import VueCompositionAPI from '@vue/composition-api'
 
 export const createFile = ({ id, status = 1, type = 'folder' }) => ({
   id: `file-id-${id}`,
@@ -23,6 +24,7 @@ localVue.prototype.$client = new OwnCloud()
 localVue.prototype.$client.init({ baseUrl: 'http://none.de' })
 localVue.use(Vuex)
 localVue.use(DesignSystem)
+localVue.use(VueCompositionAPI)
 /*
  * TODO: options on GetTextPlugin do not have any effect because of
  * packages/web-app-files/src/gettext.js which overwrites every setting.
diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
index f8bfd2f7d3e..b7acdf7d179 100644
--- a/packages/web-runtime/package.json
+++ b/packages/web-runtime/package.json
@@ -5,6 +5,7 @@
   "license": "AGPL-3.0",
   "dependencies": {
     "@popperjs/core": "^2.4.0",
+    "@vue/composition-api": "^1.2.4",
     "axe-core": "^4.3.3",
     "easygettext": "^2.16.1",
     "filesize": "^8.0.0",
@@ -29,6 +30,7 @@
     "vue": "^2.6.10",
     "vue-async-computed": "^3.9.0",
     "vue-axe": "^2.4.4",
+    "vue-concurrency": "^2.2.1",
     "vue-drag-drop": "^1.1.4",
     "vue-events": "^3.1.0",
     "vue-gettext": "^2.1.5",
diff --git a/packages/web-runtime/src/defaults/vue.js b/packages/web-runtime/src/defaults/vue.js
index 55fc278ae5e..b9fcd096884 100644
--- a/packages/web-runtime/src/defaults/vue.js
+++ b/packages/web-runtime/src/defaults/vue.js
@@ -18,7 +18,9 @@ import { Drag, Drop } from 'vue-drag-drop'
 import VueAxe from 'vue-axe'
 import VueRouter from 'vue-router'
 import Vuex from 'vuex'
+import VueCompositionAPI from '@vue/composition-api'
 
+Vue.use(VueCompositionAPI)
 Vue.use(Vuex)
 Vue.use(VueRouter)
 Vue.use(VueEvents)
diff --git a/yarn.lock b/yarn.lock
index 839ebae34db..a58d23c878b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2916,6 +2916,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/composition-api@npm:^1.2.4":
+  version: 1.2.4
+  resolution: "@vue/composition-api@npm:1.2.4"
+  dependencies:
+    tslib: ^2.3.0
+  peerDependencies:
+    vue: ">= 2.5 < 3"
+  checksum: a38651fe05b135cbddccf17090aeed4ef1b12e2f8da613778cf788fd18bf92292888ffad422d91b634af11008e843ca815ab1048b3806af0511ac0a7a88e2c8b
+  languageName: node
+  linkType: hard
+
 "@vue/shared@npm:3.1.1":
   version: 3.1.1
   resolution: "@vue/shared@npm:3.1.1"
@@ -2923,7 +2934,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/test-utils@npm:^1.1.0, @vue/test-utils@npm:^1.1.2":
+"@vue/test-utils@npm:^1.1.0":
   version: 1.2.1
   resolution: "@vue/test-utils@npm:1.2.1"
   dependencies:
@@ -2937,6 +2948,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/test-utils@npm:^1.1.2":
+  version: 1.2.2
+  resolution: "@vue/test-utils@npm:1.2.2"
+  dependencies:
+    dom-event-types: ^1.0.0
+    lodash: ^4.17.15
+    pretty: ^2.0.0
+  peerDependencies:
+    vue: 2.x
+    vue-template-compiler: ^2.x
+  checksum: a373ffe4fa35f6d7d64eb5547ba656f8445b23923a5735d64b378061b378515139044fe73d931de1130fd310ad692e575f4826db03a4289737eaa4ff5a45dc98
+  languageName: node
+  linkType: hard
+
 "@wessberg/stringutil@npm:^1.0.19":
   version: 1.0.19
   resolution: "@wessberg/stringutil@npm:1.0.19"
@@ -4383,6 +4408,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"caf@npm:^9.0.0":
+  version: 9.1.0
+  resolution: "caf@npm:9.1.0"
+  checksum: 16c2985b73019b5e61681c37ee033aebdaf38c2fb16b4d17bf91382b1687441321e25529285914168de0e6eba0c446f77793d4ec820114dde8117231488dee5a
+  languageName: node
+  linkType: hard
+
 "call-bind@npm:^1.0.0, call-bind@npm:^1.0.2":
   version: 1.0.2
   resolution: "call-bind@npm:1.0.2"
@@ -15833,7 +15865,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.3":
+"tslib@npm:^2.0.3, tslib@npm:^2.3.0":
   version: 2.3.1
   resolution: "tslib@npm:2.3.1"
   checksum: de17a98d4614481f7fcb5cd53ffc1aaf8654313be0291e1bfaee4b4bb31a20494b7d218ff2e15017883e8ea9626599b3b0e0229c18383ba9dce89da2adf15cb9
@@ -16372,6 +16404,15 @@ typescript@^4.3.2:
   languageName: node
   linkType: hard
 
+"vue-concurrency@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "vue-concurrency@npm:2.2.1"
+  dependencies:
+    caf: ^9.0.0
+  checksum: 989500bb3d3c3b79ed92a6522e176b87483d05f19a054ecdef78b8b8c3a0f543a536c3bd31cd7aaa03c2507ca38609316ee04f22355dd50fcef88c850fd49e6d
+  languageName: node
+  linkType: hard
+
 "vue-drag-drop@npm:^1.1.4":
   version: 1.1.4
   resolution: "vue-drag-drop@npm:1.1.4"
@@ -16632,6 +16673,7 @@ typescript@^4.3.2:
   resolution: "web-runtime@workspace:packages/web-runtime"
   dependencies:
     "@popperjs/core": ^2.4.0
+    "@vue/composition-api": ^1.2.4
     axe-core: ^4.3.3
     easygettext: ^2.16.1
     filesize: ^8.0.0
@@ -16656,6 +16698,7 @@ typescript@^4.3.2:
     vue: ^2.6.10
     vue-async-computed: ^3.9.0
     vue-axe: ^2.4.4
+    vue-concurrency: ^2.2.1
     vue-drag-drop: ^1.1.4
     vue-events: ^3.1.0
     vue-gettext: ^2.1.5

From b50f77d75a58f36c9237270f4f798300da6c7b3e Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Tue, 19 Oct 2021 19:28:11 +0200
Subject: [PATCH 2/2] fix tests and dependencies

---
 tests/integration/config/jest.init.js |  2 ++
 yarn.lock                             | 16 +---------------
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/tests/integration/config/jest.init.js b/tests/integration/config/jest.init.js
index f76a36b1304..2898fe2af22 100644
--- a/tests/integration/config/jest.init.js
+++ b/tests/integration/config/jest.init.js
@@ -3,6 +3,7 @@ import { config } from '@vue/test-utils'
 import fetchMock from 'jest-fetch-mock'
 import ODS from 'owncloud-design-system'
 import GetTextPlugin from 'vue-gettext'
+import VueCompositionAPI from '@vue/composition-api'
 
 // eslint-disable-next-line jest/no-mocks-import
 import sdkMock from '../../../__mocks__/sdk'
@@ -15,6 +16,7 @@ window.IntersectionObserver = jest.fn(() => ({
 }))
 
 Vue.use(ODS)
+Vue.use(VueCompositionAPI)
 
 Vue.use(GetTextPlugin, {
   availableLanguages: ['en'],
diff --git a/yarn.lock b/yarn.lock
index a58d23c878b..64b8af9b097 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2934,7 +2934,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/test-utils@npm:^1.1.0":
+"@vue/test-utils@npm:^1.1.0, @vue/test-utils@npm:^1.1.2":
   version: 1.2.1
   resolution: "@vue/test-utils@npm:1.2.1"
   dependencies:
@@ -2948,20 +2948,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/test-utils@npm:^1.1.2":
-  version: 1.2.2
-  resolution: "@vue/test-utils@npm:1.2.2"
-  dependencies:
-    dom-event-types: ^1.0.0
-    lodash: ^4.17.15
-    pretty: ^2.0.0
-  peerDependencies:
-    vue: 2.x
-    vue-template-compiler: ^2.x
-  checksum: a373ffe4fa35f6d7d64eb5547ba656f8445b23923a5735d64b378061b378515139044fe73d931de1130fd310ad692e575f4826db03a4289737eaa4ff5a45dc98
-  languageName: node
-  linkType: hard
-
 "@wessberg/stringutil@npm:^1.0.19":
   version: 1.0.19
   resolution: "@wessberg/stringutil@npm:1.0.19"