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', () => {