move ListLoader component

changelog/unreleased/enhancement-move-list-loader-component

@@ -0,0 +1,6 @@
+Enhancement: Move ListLoader component
+
+We've moved the ListLoader component into the web-pkg package and give it a more general name,
+to ease the use in other packages.
+
+https://github.com/owncloud/web/pull/6644

packages/web-app-files/src/components/TrashBin.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <list-loader v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <no-content-message
         v-if="isEmpty"
@@ -53,7 +53,7 @@ import MixinFilesListFilter from '../mixins/filesListFilter'
 import MixinResources from '../mixins/resources'
 import MixinMountSideBar from '../mixins/sidebar/mountSideBar'
 
-import ListLoader from './FilesList/ListLoader.vue'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import ListInfo from './FilesList/ListInfo.vue'
 import Pagination from './FilesList/Pagination.vue'
@@ -64,7 +64,14 @@ import { bus } from 'web-pkg/src/instance'
 export default {
   name: 'TrashBin',
 
-  components: { ResourceTable, ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
+  components: {
+    ResourceTable,
+    AppLoadingSpinner,
+    NoContentMessage,
+    ListInfo,
+    Pagination,
+    ContextActions
+  },
 
   mixins: [MixinResources, MixinMountSideBar, MixinFilesListFilter],
   props: {

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <list-loader v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <no-content-message v-if="isEmpty" id="files-favorites-empty" class="files-empty" icon="star">
         <template #message>
@@ -57,7 +57,7 @@ import { ImageDimension, ImageType } from '../constants'
 import debounce from 'lodash-es/debounce'
 
 import QuickActions from '../components/FilesList/QuickActions.vue'
-import ListLoader from '../components/FilesList/ListLoader.vue'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
 import Pagination from '../components/FilesList/Pagination.vue'
@@ -71,7 +71,7 @@ export default {
   components: {
     ResourceTable,
     QuickActions,
-    ListLoader,
+    AppLoadingSpinner,
     Pagination,
     NoContentMessage,
     ListInfo,

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

@@ -35,7 +35,7 @@
         </oc-grid>
       </div>
       <div id="files-view">
-        <list-loader v-if="loadResourcesTask.isRunning" />
+        <app-loading-spinner v-if="loadResourcesTask.isRunning" />
         <template v-else>
           <no-content-message
             v-if="isEmpty"
@@ -91,7 +91,7 @@ import MixinFilesListFilter from '../mixins/filesListFilter'
 import { useTask } from 'vue-concurrency'
 
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-import ListLoader from '../components/FilesList/ListLoader.vue'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
 import Pagination from '../components/FilesList/Pagination.vue'
 import { DavProperties } from 'web-pkg/src/constants'
@@ -109,7 +109,7 @@ export default {
   components: {
     ResourceTable,
     NoContentMessage,
-    ListLoader,
+    AppLoadingSpinner,
     ListInfo,
     Pagination
   },

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <list-loader v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
       <no-content-message
@@ -78,7 +78,7 @@ import { bus } from 'web-pkg/src/instance'
 
 import ResourceTable from '../components/FilesList/ResourceTable.vue'
 import QuickActions from '../components/FilesList/QuickActions.vue'
-import ListLoader from '../components/FilesList/ListLoader.vue'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import NotFoundMessage from '../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
@@ -96,7 +96,7 @@ export default {
   components: {
     ResourceTable,
     QuickActions,
-    ListLoader,
+    AppLoadingSpinner,
     NoContentMessage,
     NotFoundMessage,
     ListInfo,

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <list-loader v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
       <no-content-message
@@ -66,7 +66,7 @@ import { ImageDimension, ImageType } from '../constants'
 import debounce from 'lodash-es/debounce'
 import { bus } from 'web-pkg/src/instance'
 
-import ListLoader from '../components/FilesList/ListLoader.vue'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import NotFoundMessage from '../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
@@ -81,7 +81,7 @@ export default {
     ResourceTable,
     ListInfo,
     Pagination,
-    ListLoader,
+    AppLoadingSpinner,
     NoContentMessage,
     NotFoundMessage,
     ContextActions

packages/web-app-files/src/views/shares/SharedViaLink.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <list-loader v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <no-content-message
         v-if="isEmpty"
@@ -58,7 +58,7 @@ import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../../constants'
 import debounce from 'lodash-es/debounce'
 
-import ListLoader from '../../components/FilesList/ListLoader.vue'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
@@ -69,7 +69,14 @@ import { useResourcesViewDefaults } from '../../composables'
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  components: { ResourceTable, ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
+  components: {
+    ResourceTable,
+    AppLoadingSpinner,
+    NoContentMessage,
+    ListInfo,
+    Pagination,
+    ContextActions
+  },
 
   mixins: [FileActions, MixinResources, MixinMountSideBar, MixinFilesListFilter],
 

packages/web-app-files/src/views/shares/SharedWithMe.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="oc-flex oc-flex-column">
-    <list-loader v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <!-- Pending shares -->
       <div v-if="hasPending">
@@ -173,7 +173,7 @@ import { useSort, useResourcesViewDefaults } from '../../composables'
 import { useRouteQuery } from 'web-pkg/src/composables'
 import debounce from 'lodash-es/debounce'
 
-import ListLoader from '../../components/FilesList/ListLoader.vue'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import ContextActions from '../../components/FilesList/ContextActions.vue'
@@ -186,7 +186,7 @@ const visibilityObserver = new VisibilityObserver()
 export default {
   components: {
     ResourceTable,
-    ListLoader,
+    AppLoadingSpinner,
     NoContentMessage,
     ListInfo,
     ContextActions

packages/web-app-files/src/views/shares/SharedWithOthers.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <list-loader v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <no-content-message
         v-if="isEmpty"
@@ -60,7 +60,7 @@ import { VisibilityObserver } from 'web-pkg/src/observer'
 import { ImageDimension, ImageType } from '../../constants'
 import debounce from 'lodash-es/debounce'
 
-import ListLoader from '../../components/FilesList/ListLoader.vue'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
@@ -71,7 +71,14 @@ import { useResourcesViewDefaults } from '../../composables'
 const visibilityObserver = new VisibilityObserver()
 
 export default {
-  components: { ResourceTable, ListLoader, NoContentMessage, ListInfo, Pagination, ContextActions },
+  components: {
+    ResourceTable,
+    AppLoadingSpinner,
+    NoContentMessage,
+    ListInfo,
+    Pagination,
+    ContextActions
+  },
 
   mixins: [FileActions, MixinResources, MixinMountSideBar, MixinFilesListFilter],
 

packages/web-app-files/src/views/spaces/Project.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="space-overview">
-    <list-loader v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <not-found-message v-if="!space.id" class="space-not-found oc-height-1-1" />
       <div v-else-if="isSpaceRoot">
@@ -142,7 +142,7 @@
 <script>
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import NotFoundMessage from '../../components/FilesList/NotFoundMessage.vue'
-import ListLoader from '../../components/FilesList/ListLoader.vue'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import { computed, ref } from '@vue/composition-api'
 import { marked } from 'marked'
 import sanitizeHtml from 'sanitize-html'
@@ -181,7 +181,7 @@ const visibilityObserver = new VisibilityObserver()
 export default {
   components: {
     NoContentMessage,
-    ListLoader,
+    AppLoadingSpinner,
     NotFoundMessage,
     ResourceTable,
     ListInfo,

packages/web-app-files/src/views/spaces/Projects.vue

@@ -21,7 +21,7 @@
       />
       <!-- <a href="#" v-text="$gettext('Learn more about spaces.')" /> -->
     </div>
-    <list-loader v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <no-content-message
         v-if="!spaces.length"
@@ -163,7 +163,7 @@
 
 <script>
 import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
-import ListLoader from '../../components/FilesList/ListLoader.vue'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
 import { computed } from '@vue/composition-api'
 import { useStore } from 'web-pkg/src/composables'
 import { useTask } from 'vue-concurrency'
@@ -188,7 +188,7 @@ export default {
   components: {
     NoContentMessage,
     QuotaModal,
-    ListLoader
+    AppLoadingSpinner
   },
   mixins: [
     Rename,

packages/web-app-files/tests/unit/components/TrashBin.spec.js

@@ -3,7 +3,7 @@ import TrashBin from '@files/src/components/TrashBin.vue'
 import { getStore, localVue, createFile } from '@files/tests/unit/components/components.setup.js'
 
 const stubs = {
-  'list-loader': true,
+  'app-loading-spinner': true,
   'no-content-message': true,
   'resource-table': true,
   'context-actions': true,
@@ -12,7 +12,7 @@ const stubs = {
   'router-link': true
 }
 
-const listLoaderStub = 'list-loader-stub'
+const appLoadingSpinnerStub = 'app-loading-spinner-stub'
 const noContentStub = 'no-content-message-stub'
 const filesTableStub = 'resource-table-stub'
 const filesTableSelector = '#files-trashbin-table'
@@ -21,10 +21,10 @@ const listInfoStub = 'list-info-stub'
 const paginationStub = 'pagination-stub'
 
 describe('Trashbin component', () => {
-  it('should show the list loader when the view is still loading', () => {
+  it('should show the app-loading-spinner component when the view is still loading', () => {
     const wrapper = getMountedWrapper({ loading: true })
 
-    expect(wrapper.find(listLoaderStub).exists()).toBeTruthy()
+    expect(wrapper.find(appLoadingSpinnerStub).exists()).toBeTruthy()
     expect(wrapper.find(noContentStub).exists()).toBeFalsy()
     expect(wrapper.find(filesTableStub).exists()).toBeFalsy()
   })
@@ -33,7 +33,7 @@ describe('Trashbin component', () => {
     it('should show the no content message component if the paginated resources is empty', () => {
       const wrapper = getMountedWrapper()
 
-      expect(wrapper.find(listLoaderStub).exists()).toBeFalsy()
+      expect(wrapper.find(appLoadingSpinnerStub).exists()).toBeFalsy()
       expect(wrapper.find(filesTableStub).exists()).toBeFalsy()
       expect(wrapper.find(noContentStub).exists()).toBeTruthy()
     })

packages/web-app-files/tests/unit/views/LocationPicker.spec.js

@@ -29,7 +29,7 @@ const router = {
   }
 }
 
-const listLoaderStub = 'list-loader-stub'
+const listLoaderStub = 'app-loading-spinner-stub'
 const breadcrumbStub = 'oc-breadcrumb-stub'
 const listInfoStub = 'list-info-stub'
 const filesPaginationStub = 'pagination-stub'
@@ -243,7 +243,7 @@ describe('LocationPicker', () => {
         const wrapper = getShallowWrapper({ loading: true })
         filesView = wrapper.find(selectors.filesView)
       })
-      it('should show list loader', () => {
+      it('should show app-loading-spinner component', () => {
         expect(filesView.find(listLoaderStub).exists()).toBeTruthy()
         expect(filesView.find(listLoaderStub)).toMatchSnapshot()
       })
@@ -257,7 +257,7 @@ describe('LocationPicker', () => {
     describe('when the view is not loading anymore', () => {
       const wrapper = getShallowWrapper()
       const filesView = wrapper.find(selectors.filesView)
-      it('should not show list loader', () => {
+      it('should not show app-loading-spinner component', () => {
         expect(filesView.find(listLoaderStub).exists()).toBeFalsy()
       })
       it('should show no content message if active files length is less than one', () => {

packages/web-app-files/tests/unit/views/PublicFiles.spec.ts

@@ -9,7 +9,7 @@ const createFolder = ({ name = '1234', canCreate = false } = {}) => ({
 })
 
 const stubs = {
-  'list-loader': true,
+  'app-loading-spinner': true,
   'not-found-message': true,
   'no-content-message': true,
   'resource-table': true,
@@ -34,7 +34,7 @@ const $router = {
 const resourceList = [createFile({ id: 1234 }), createFile({ id: 1235 }), createFile({ id: 1236 })]
 
 const stubSelectors = {
-  listLoader: 'list-loader-stub',
+  appLoadingSpinner: 'app-loading-spinner-stub',
   notFoundMessage: 'not-found-message-stub',
   noContentMessage: 'no-content-message-stub',
   resourceTable: 'resource-table-stub',
@@ -50,18 +50,18 @@ describe('PublicFiles view', () => {
       await accentuatesTableRowTest(PublicFiles)
     })
   })
-  it('should show the list loader when the view is still loading', () => {
+  it('should show the app-loading-spinner component when the view is still loading', () => {
     const wrapper = getMountedWrapper({ loading: true })
 
-    expect(wrapper.find(stubSelectors.listLoader).exists()).toBeTruthy()
+    expect(wrapper.find(stubSelectors.appLoadingSpinner).exists()).toBeTruthy()
     expect(wrapper.find(stubSelectors.noContentMessage).exists()).toBeFalsy()
     expect(wrapper.find(stubSelectors.resourceTable).exists()).toBeFalsy()
   })
   describe('when the view is not loading anymore', () => {
-    it('should not show the list loader', () => {
+    it('should not show the app-loading-spinner component', () => {
       const wrapper = getMountedWrapper({ loading: false })
 
-      expect(wrapper.find(stubSelectors.listLoader).exists()).toBeFalsy()
+      expect(wrapper.find(stubSelectors.appLoadingSpinner).exists()).toBeFalsy()
     })
 
     describe('not found message component', () => {