Files lists loading state

apps/files/src/components/AllFilesList.vue

@@ -88,6 +88,14 @@
     <template #rowActions="{ item: rowItem }">
       <quick-actions :actions="app.quickActions" :item="rowItem" />
     </template>
+    <template #loadingMessage>
+      <template v-if="!$_isFavoritesList">
+        <translate key="all-files-loading-folder">Loading folder</translate>
+      </template>
+      <template v-else>
+        <translate key="all-files-loading-favorites">Loading favorites</translate>
+      </template>
+    </template>
     <template #noContentMessage>
       <no-content-message v-if="!$_isFavoritesList" icon="folder">
         <template #message

apps/files/src/components/Collaborators/NewCollaborator.vue

@@ -87,7 +87,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import debounce from 'lodash/debounce'
 import { mapActions, mapGetters } from 'vuex'
 import Mixins from '../../mixins/collaborators'
 import { roleToBitmask } from '../../helpers/collaborators'
@@ -139,7 +139,7 @@ export default {
       this.$refs.ocSharingAutocomplete.focus()
     })
 
-    this.$_onAutocompleteInput = _.debounce(this.$_onAutocompleteInput, 1000)
+    this.$_onAutocompleteInput = debounce(this.$_onAutocompleteInput, 1000)
   },
 
   methods: {

apps/files/src/components/Collaborators/SharedFilesList.vue

@@ -154,6 +154,9 @@
         v-text="formDateFromNow(item.shareTime)"
       />
     </template>
+    <template #loadingMessage>
+      <translate>Loading shared resources</translate>
+    </template>
     <template #noContentMessage>
       <no-content-message icon="group">
         <template #message>

apps/files/src/components/FileList.vue

@@ -33,7 +33,15 @@
           >
         </div>
       </oc-grid>
-      <div v-if="!loading" id="files-list-container" class="uk-overflow-auto">
+      <div v-if="loading" id="files-list-loading-message" class="uk-position-center">
+        <div class="uk-text-center">
+          <oc-spinner id="files-list-progress" size="large" :aria-hidden="true" />
+          <div class="uk-text-muted uk-text-large">
+            <slot name="loadingMessage" />
+          </div>
+        </div>
+      </div>
+      <div v-else id="files-list-container" class="uk-overflow-auto">
         <RecycleScroller
           v-if="fileData.length"
           v-slot="{ item: rowItem, index, active }"

apps/files/src/components/FilesApp.vue

@@ -13,7 +13,6 @@
         :class="{ 'uk-visible@m': _sidebarOpen }"
         @dragover="$_ocApp_dragOver"
       >
-        <oc-loader v-if="loadingFolder" id="files-list-progress"></oc-loader>
         <trash-bin v-if="$route.name === 'files-trashbin'" :file-data="activeFiles" />
         <shared-files-list
           v-else-if="sharedList"

apps/files/src/components/Trashbin.vue

@@ -54,6 +54,9 @@
             {{ formDateFromNow(item.deleteTimestamp) }}
           </div>
         </template>
+        <template #loadingMessage>
+          <translate>Loading deleted files</translate>
+        </template>
         <template #noContentMessage>
           <no-content-message icon="delete">
             <template #message>

apps/files/src/store/actions.js

@@ -1,4 +1,5 @@
 import moment from 'moment'
+import uniqueId from 'lodash/uniqueId'
 import _ from 'lodash'
 import { getParentPaths } from '../helpers/path'
 import { bitmaskToRole, permissionsBitmask } from '../helpers/collaborators'
@@ -23,7 +24,7 @@ function _buildFile(file) {
     // actual file id (string)
     id: file.fileInfo['{http://owncloud.org/ns}fileid'],
     // temporary list id, to be used for view only and for uniqueness inside the list
-    viewId: _.uniqueId('file-'),
+    viewId: uniqueId('file-'),
     starred: file.fileInfo['{http://owncloud.org/ns}favorite'] !== '0',
     mdate: file.fileInfo['{DAV:}getlastmodified'],
     mdateMoment: moment(file.fileInfo['{DAV:}getlastmodified']),

apps/files/src/store/mutations.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import _ from 'lodash'
+import pickBy from 'lodash/pickBy'
 
 /**
  * @param {Array.<Object>} shares array of shares
@@ -185,8 +185,8 @@ export default {
       if (pathToKeep.charAt(0) !== '/') {
         pathToKeep = '/' + pathToKeep
       }
-      state.sharesTree = _.pickBy(state.sharesTree, (shares, path) => {
-        return _.startsWith(pathToKeep, path + '/')
+      state.sharesTree = pickBy(state.sharesTree, (shares, path) => {
+        return pathToKeep.startsWith(path + '/')
       })
     } else {
       state.sharesTree = {}

changelog/unreleased/files-list-loader

@@ -0,0 +1,5 @@
+Change: More descriptive loading state
+
+When browsing the different variations of the files list we removed the loader component at the top in favor of a spinner in the center of the viewport. The spinner has one line of text which describes what kind of data is being loaded.
+
+https://github.com/owncloud/phoenix/pull/4099