From 247d115f8a2b9a6aa44672c1885671538480cf33 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 15 Mar 2023 13:28:54 +0100
Subject: [PATCH] Properly inject the loadingService

---
 .../src/views/Users.vue                       |  3 ++-
 .../src/components/AppBar/CreateAndUpload.vue |  1 +
 .../components/FilesList/KeyboardActions.vue  | 16 +++---------
 .../src/helpers/resource/actions/transfer.ts  |  5 ++--
 .../src/mixins/actions/downloadArchive.ts     |  3 +--
 .../src/mixins/actions/emptyTrashBin.ts       |  3 +--
 .../web-app-files/src/mixins/actions/paste.ts |  1 +
 .../src/mixins/actions/restore.ts             |  4 +--
 .../src/mixins/deleteResources.ts             |  4 +--
 packages/web-app-files/src/store/actions.ts   |  4 ++-
 .../src/views/spaces/GenericSpace.vue         |  1 +
 .../resource/resourcesTransfer.spec.ts        | 12 +++++++--
 .../unit/mixins/actions/emptyTrashBin.spec.ts | 10 ++++---
 .../tests/unit/mixins/actions/restore.spec.ts |  2 +-
 .../src/components/LoadingIndicator.vue       |  5 ++--
 packages/web-pkg/src/composables/index.ts     |  1 +
 .../src/composables/loadingService/index.ts   |  1 +
 .../loadingService/useLoadingService.ts       |  6 +++++
 .../web-pkg/src/services/loadingService.ts    |  2 --
 .../unit/components/LoadingIndicator.spec.ts  | 26 ++++++++-----------
 .../web-runtime/src/container/bootstrap.ts    | 10 ++++++-
 packages/web-runtime/src/index.ts             |  4 ++-
 .../src/mocks/defaultComponentMocks.ts        | 11 +++++---
 23 files changed, 81 insertions(+), 54 deletions(-)
 create mode 100644 packages/web-pkg/src/composables/loadingService/index.ts
 create mode 100644 packages/web-pkg/src/composables/loadingService/useLoadingService.ts

diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index 23107cf10f2..c35e26193b7 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -170,6 +170,7 @@ import {
   useAccessToken,
   useCapabilitySpacesMaxQuota,
   useGraphClient,
+  useLoadingService,
   useRouteQuery,
   useStore
 } from 'web-pkg/src/composables'
@@ -200,7 +201,6 @@ import GroupsModal from '../components/Users/GroupsModal.vue'
 import { useRemoveFromGroups } from '../mixins/users/removeFromGroups'
 import { useAddToGroups } from '../mixins/users/addToGroups'
 import { configurationManager } from 'web-pkg'
-import { loadingService } from 'web-pkg/src/services'
 
 export default defineComponent({
   name: 'UsersView',
@@ -221,6 +221,7 @@ export default defineComponent({
     const store = useStore()
     const accessToken = useAccessToken({ store })
     const { graphClient } = useGraphClient()
+    const loadingService = useLoadingService()
 
     const { actions: removeFromGroupsActions } = useRemoveFromGroups()
     const { actions: addToGroupsActions } = useAddToGroups()
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index 058bb09083c..062d7ace6c4 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -341,6 +341,7 @@ export default defineComponent({
       this.pasteSelectedFiles({
         targetSpace: this.space,
         clientService: this.$clientService,
+        loadingService: this.$loadingService,
         createModal: this.createModal,
         hideModal: this.hideModal,
         showMessage: this.showMessage,
diff --git a/packages/web-app-files/src/components/FilesList/KeyboardActions.vue b/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
index 5624eafacfa..edf8135211a 100644
--- a/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
+++ b/packages/web-app-files/src/components/FilesList/KeyboardActions.vue
@@ -5,19 +5,10 @@
 <script lang="ts">
 import keycode from 'keycode'
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import {
-  defineComponent,
-  getCurrentInstance,
-  onBeforeUnmount,
-  onMounted,
-  PropType,
-  computed,
-  ref,
-  unref
-} from 'vue'
+import { defineComponent, onBeforeUnmount, onMounted, PropType, computed, ref, unref } from 'vue'
 import { Resource, SpaceResource } from 'web-client/src/helpers'
 import { useScrollTo } from 'web-app-files/src/composables/scrollTo'
-import { useClientService, useStore } from 'web-pkg'
+import { useClientService, useLoadingService, useStore } from 'web-pkg'
 import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
@@ -37,11 +28,11 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const instance = getCurrentInstance().proxy as any
     const store = useStore()
     const language = useGettext()
     const clientService = useClientService()
     const { scrollToResource } = useScrollTo()
+    const loadingService = useLoadingService()
 
     const selectionCursor = ref(0)
     let fileListClickedEvent
@@ -106,6 +97,7 @@ export default defineComponent({
       store.dispatch('Files/pasteSelectedFiles', {
         targetSpace: props.space,
         clientService: clientService,
+        loadingService: loadingService,
         createModal: (modal) => {
           store.dispatch('createModal', modal)
         },
diff --git a/packages/web-app-files/src/helpers/resource/actions/transfer.ts b/packages/web-app-files/src/helpers/resource/actions/transfer.ts
index 8b49953254e..edc3ecb0d2c 100644
--- a/packages/web-app-files/src/helpers/resource/actions/transfer.ts
+++ b/packages/web-app-files/src/helpers/resource/actions/transfer.ts
@@ -1,7 +1,7 @@
 import { Resource } from 'web-client'
 import { join } from 'path'
 import { SpaceResource } from 'web-client/src/helpers'
-import { ClientService, loadingService, LoadingTaskState } from 'web-pkg/src/services'
+import { ClientService, LoadingService, LoadingTaskState } from 'web-pkg/src/services'
 import {
   ConflictDialog,
   ResolveStrategy,
@@ -18,6 +18,7 @@ export class ResourceTransfer extends ConflictDialog {
     private targetSpace: SpaceResource,
     private targetFolder: Resource,
     private clientService: ClientService,
+    private loadingService: LoadingService,
     createModal: (modal: object) => void,
     hideModal: () => void,
     showMessage: (data: object) => void,
@@ -117,7 +118,7 @@ export class ResourceTransfer extends ConflictDialog {
       targetFolderResources
     )
 
-    return loadingService.addTask(
+    return this.loadingService.addTask(
       ({ setProgress }) => {
         return this.moveResources(
           resolvedConflicts,
diff --git a/packages/web-app-files/src/mixins/actions/downloadArchive.ts b/packages/web-app-files/src/mixins/actions/downloadArchive.ts
index 06f12a6358f..6b57d7d6ca4 100644
--- a/packages/web-app-files/src/mixins/actions/downloadArchive.ts
+++ b/packages/web-app-files/src/mixins/actions/downloadArchive.ts
@@ -10,7 +10,6 @@ import first from 'lodash-es/first'
 import { archiverService } from '../../services'
 import { isPublicSpaceResource, Resource } from 'web-client/src/helpers'
 import { mapGetters } from 'vuex'
-import { loadingService } from 'web-pkg/src/services'
 
 export default {
   mixins: [isFilesAppActive],
@@ -79,7 +78,7 @@ export default {
             dir: path.dirname(first<Resource>(resources).path) || '/',
             files: resources.map((resource) => resource.name)
           }
-      return loadingService.addTask(() => {
+      return this.$loadingService.addTask(() => {
         return archiverService
           .triggerDownload({
             ...fileOptions,
diff --git a/packages/web-app-files/src/mixins/actions/emptyTrashBin.ts b/packages/web-app-files/src/mixins/actions/emptyTrashBin.ts
index 897e71e45c9..6f52f018b14 100644
--- a/packages/web-app-files/src/mixins/actions/emptyTrashBin.ts
+++ b/packages/web-app-files/src/mixins/actions/emptyTrashBin.ts
@@ -3,7 +3,6 @@ import { isLocationTrashActive } from '../../router'
 import { buildWebDavFilesTrashPath } from '../../helpers/resources'
 import { buildWebDavSpacesTrashPath } from 'web-client/src/helpers'
 import { isProjectSpaceResource } from 'web-client/src/helpers'
-import { loadingService } from 'web-pkg'
 
 export default {
   computed: {
@@ -71,7 +70,7 @@ export default {
         ? buildWebDavSpacesTrashPath(this.space.id)
         : buildWebDavFilesTrashPath(this.user.id)
 
-      return loadingService.addTask(() => {
+      return this.$loadingService.addTask(() => {
         return this.$client.fileTrash
           .clearTrashBin(path)
           .then(() => {
diff --git a/packages/web-app-files/src/mixins/actions/paste.ts b/packages/web-app-files/src/mixins/actions/paste.ts
index c67f8d22eb0..88fa6368b85 100644
--- a/packages/web-app-files/src/mixins/actions/paste.ts
+++ b/packages/web-app-files/src/mixins/actions/paste.ts
@@ -63,6 +63,7 @@ export default {
       this.pasteSelectedFiles({
         targetSpace: this.space,
         clientService: this.$clientService,
+        loadingService: this.$loadingService,
         createModal: this.createModal,
         hideModal: this.hideModal,
         showMessage: this.showMessage,
diff --git a/packages/web-app-files/src/mixins/actions/restore.ts b/packages/web-app-files/src/mixins/actions/restore.ts
index e621e910e59..8ad35cc862b 100644
--- a/packages/web-app-files/src/mixins/actions/restore.ts
+++ b/packages/web-app-files/src/mixins/actions/restore.ts
@@ -2,7 +2,7 @@ import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 import { dirname } from 'path'
 import { isLocationTrashActive } from '../../router'
 
-import { clientService, loadingService, LoadingTaskState } from 'web-pkg/src/services'
+import { clientService, LoadingTaskState } from 'web-pkg/src/services'
 import { Resource, isProjectSpaceResource, extractExtensionFromFile } from 'web-client/src/helpers'
 import {
   ResolveStrategy,
@@ -281,7 +281,7 @@ export default {
         resource.path = urlJoin(parentPath, resolvedName)
         resolvedResources.push(resource)
       }
-      return loadingService.addTask(
+      return this.$loadingService.addTask(
         ({ setProgress }) => {
           return this.$_restore_restoreResources(resolvedResources, missingFolderPaths, setProgress)
         },
diff --git a/packages/web-app-files/src/mixins/deleteResources.ts b/packages/web-app-files/src/mixins/deleteResources.ts
index c5d87b46007..04eb65e518c 100644
--- a/packages/web-app-files/src/mixins/deleteResources.ts
+++ b/packages/web-app-files/src/mixins/deleteResources.ts
@@ -5,7 +5,7 @@ import { buildWebDavFilesTrashPath } from '../helpers/resources'
 import { buildWebDavSpacesTrashPath } from 'web-client/src/helpers'
 import PQueue from 'p-queue'
 import { isLocationTrashActive, isLocationSpacesActive } from '../router'
-import { clientService, loadingService } from 'web-pkg/src/services'
+import { clientService } from 'web-pkg/src/services'
 import { dirname } from 'path'
 import { createFileRouteOptions } from 'web-pkg/src/helpers/router'
 
@@ -153,7 +153,7 @@ export default {
     },
 
     $_deleteResources_filesList_delete() {
-      return loadingService.addTask(
+      return this.$loadingService.addTask(
         ({ setProgress }) => {
           return this.deleteFiles({
             ...this.$language,
diff --git a/packages/web-app-files/src/store/actions.ts b/packages/web-app-files/src/store/actions.ts
index f1ea2b5e52e..75787c49eb1 100644
--- a/packages/web-app-files/src/store/actions.ts
+++ b/packages/web-app-files/src/store/actions.ts
@@ -17,7 +17,7 @@ import {
   SpaceResource
 } from 'web-client/src/helpers'
 import { WebDAV } from 'web-client/src/webdav'
-import { ClientService, loadingService, LoadingTaskState } from 'web-pkg/src/services'
+import { ClientService, LoadingTaskState } from 'web-pkg/src/services'
 import { Language } from 'vue3-gettext'
 import { DavProperty } from 'web-client/src/webdav/constants'
 import { AncestorMetaData } from 'web-app-files/src/helpers/resource/ancestorMetaData'
@@ -78,6 +78,7 @@ export default {
     {
       targetSpace,
       clientService,
+      loadingService,
       createModal,
       hideModal,
       showMessage,
@@ -92,6 +93,7 @@ export default {
       targetSpace,
       context.state.currentFolder,
       clientService,
+      loadingService,
       createModal,
       hideModal,
       showMessage,
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 00885b1663e..83f7c8ac01a 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -443,6 +443,7 @@ export default defineComponent({
         this.space,
         targetFolder,
         this.$clientService,
+        this.$loadingService,
         this.createModal,
         this.hideModal,
         this.showMessage,
diff --git a/packages/web-app-files/tests/unit/helpers/resource/resourcesTransfer.spec.ts b/packages/web-app-files/tests/unit/helpers/resource/resourcesTransfer.spec.ts
index 2b8fe3d650d..e47714cf674 100644
--- a/packages/web-app-files/tests/unit/helpers/resource/resourcesTransfer.spec.ts
+++ b/packages/web-app-files/tests/unit/helpers/resource/resourcesTransfer.spec.ts
@@ -1,15 +1,20 @@
-import { ClientService } from 'web-pkg/src/services'
+import { ClientService, LoadingService } from 'web-pkg/src/services'
 import {
   ResolveConflict,
   ResourceTransfer,
   TransferType,
   resolveFileNameDuplicate
 } from '../../../../src/helpers/resource'
-import { mockDeep, mockReset } from 'jest-mock-extended'
+import { mock, mockDeep, mockReset } from 'jest-mock-extended'
 import { buildSpace, Resource } from 'web-client/src/helpers'
 import { ListFilesResult } from 'web-client/src/webdav/listFiles'
 
 const clientServiceMock = mockDeep<ClientService>()
+const loadingServiceMock = mock<LoadingService>({
+  addTask: (callback) => {
+    return callback({ setProgress: jest.fn() })
+  }
+})
 let resourcesToMove
 let sourceSpace
 let targetSpace
@@ -60,6 +65,7 @@ describe('resourcesTransfer', () => {
       targetSpace,
       resourcesToMove[0],
       clientServiceMock,
+      loadingServiceMock,
       jest.fn(),
       jest.fn(),
       jest.fn(),
@@ -88,6 +94,7 @@ describe('resourcesTransfer', () => {
           targetSpace,
           targetFolder,
           clientServiceMock,
+          loadingServiceMock,
           jest.fn(),
           jest.fn(),
           jest.fn(),
@@ -127,6 +134,7 @@ describe('resourcesTransfer', () => {
       targetSpace,
       resourcesToMove[0],
       clientServiceMock,
+      loadingServiceMock,
       jest.fn(),
       jest.fn(),
       jest.fn(),
diff --git a/packages/web-app-files/tests/unit/mixins/actions/emptyTrashBin.spec.ts b/packages/web-app-files/tests/unit/mixins/actions/emptyTrashBin.spec.ts
index 5160c3c8a83..3019270cce8 100644
--- a/packages/web-app-files/tests/unit/mixins/actions/emptyTrashBin.spec.ts
+++ b/packages/web-app-files/tests/unit/mixins/actions/emptyTrashBin.spec.ts
@@ -1,8 +1,9 @@
 import EmptyTrashBin from 'web-app-files/src/mixins/actions/emptyTrashBin'
 import { createLocationTrash, createLocationSpaces } from '../../../../src/router'
-import { mockDeep } from 'jest-mock-extended'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { OwnCloudSdk } from 'web-client/src/types'
 import { createStore, defaultPlugins, mount, defaultStoreMockOptions } from 'web-test-helpers'
+import { LoadingService } from 'web-pkg'
 
 const Component = {
   template: '<div></div>',
@@ -10,8 +11,6 @@ const Component = {
 }
 
 describe('emptyTrashBin', () => {
-  afterEach(() => jest.clearAllMocks())
-
   describe('isEnabled property', () => {
     it('should be false when resource is given', () => {
       const { wrapper } = getWrapper()
@@ -86,6 +85,11 @@ function getWrapper({
     $gettext: jest.fn(),
     $pgettext: jest.fn(),
     space: { driveType, isEditor: () => false, isManager: () => false },
+    $loadingService: mock<LoadingService>({
+      addTask: (callback) => {
+        return callback({ setProgress: jest.fn() })
+      }
+    }),
     $client: {
       ...clientMock,
       fileTrash: {
diff --git a/packages/web-app-files/tests/unit/mixins/actions/restore.spec.ts b/packages/web-app-files/tests/unit/mixins/actions/restore.spec.ts
index 9a52d2d2e2e..859642cd5b1 100644
--- a/packages/web-app-files/tests/unit/mixins/actions/restore.spec.ts
+++ b/packages/web-app-files/tests/unit/mixins/actions/restore.spec.ts
@@ -58,7 +58,7 @@ describe('restore', () => {
       const { wrapper } = getWrapper({ resolveClearTrashBin: false })
       const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
       const removeFilesFromTrashbinStub = jest.spyOn(wrapper.vm, 'removeFilesFromTrashbin')
-      await wrapper.vm.$_restore_restoreResources([{ id: '1', path: '/1' }], [])
+      await wrapper.vm.$_restore_restoreResources([{ id: '1', path: '/1' }], [], jest.fn())
 
       expect(showMessageStub).toHaveBeenCalledTimes(1)
       expect(removeFilesFromTrashbinStub).toHaveBeenCalledTimes(0)
diff --git a/packages/web-pkg/src/components/LoadingIndicator.vue b/packages/web-pkg/src/components/LoadingIndicator.vue
index f290a8e1d6f..76acbf65ca4 100644
--- a/packages/web-pkg/src/components/LoadingIndicator.vue
+++ b/packages/web-pkg/src/components/LoadingIndicator.vue
@@ -11,12 +11,13 @@
 
 <script lang="ts">
 import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
-import { eventBus } from 'web-pkg'
-import { loadingService, LoadingEventTopics } from 'web-pkg/src/services'
+import { eventBus, useLoadingService } from 'web-pkg'
+import { LoadingEventTopics } from 'web-pkg/src/services'
 
 export default defineComponent({
   name: 'LoadingIndicator',
   setup() {
+    const loadingService = useLoadingService()
     let addLoadingEventToken
     let removeLoadingEventToken
     let setProgressToken
diff --git a/packages/web-pkg/src/composables/index.ts b/packages/web-pkg/src/composables/index.ts
index bd409613825..cb152aaa3ce 100644
--- a/packages/web-pkg/src/composables/index.ts
+++ b/packages/web-pkg/src/composables/index.ts
@@ -5,6 +5,7 @@ export * from './capability'
 export * from './clientService'
 export * from './driveResolver'
 export * from './graphClient'
+export * from './loadingService'
 export * from './localStorage'
 export * from './router'
 export * from './store'
diff --git a/packages/web-pkg/src/composables/loadingService/index.ts b/packages/web-pkg/src/composables/loadingService/index.ts
new file mode 100644
index 00000000000..3a93d68fbbd
--- /dev/null
+++ b/packages/web-pkg/src/composables/loadingService/index.ts
@@ -0,0 +1 @@
+export * from './useLoadingService'
diff --git a/packages/web-pkg/src/composables/loadingService/useLoadingService.ts b/packages/web-pkg/src/composables/loadingService/useLoadingService.ts
new file mode 100644
index 00000000000..cdedad560d1
--- /dev/null
+++ b/packages/web-pkg/src/composables/loadingService/useLoadingService.ts
@@ -0,0 +1,6 @@
+import { LoadingService } from '../../services'
+import { useService } from '../service'
+
+export const useLoadingService = (): LoadingService => {
+  return useService('$loadingService')
+}
diff --git a/packages/web-pkg/src/services/loadingService.ts b/packages/web-pkg/src/services/loadingService.ts
index ae328d52b0a..44e6ed50d6c 100644
--- a/packages/web-pkg/src/services/loadingService.ts
+++ b/packages/web-pkg/src/services/loadingService.ts
@@ -96,5 +96,3 @@ export class LoadingService {
     eventBus.publish(LoadingEventTopics.setProgress)
   }
 }
-
-export const loadingService = new LoadingService()
diff --git a/packages/web-pkg/tests/unit/components/LoadingIndicator.spec.ts b/packages/web-pkg/tests/unit/components/LoadingIndicator.spec.ts
index 6a89b66602b..efe34fe67cd 100644
--- a/packages/web-pkg/tests/unit/components/LoadingIndicator.spec.ts
+++ b/packages/web-pkg/tests/unit/components/LoadingIndicator.spec.ts
@@ -1,5 +1,7 @@
 import LoadingIndicator from 'web-pkg/src/components/LoadingIndicator.vue'
 import { defaultPlugins, shallowMount } from 'web-test-helpers'
+import { mock } from 'jest-mock-extended'
+import { LoadingService } from 'web-pkg'
 
 const selectors = {
   loadingIndicator: '#oc-loading-indicator',
@@ -11,34 +13,28 @@ describe('LoadingIndicator', () => {
     const { wrapper } = getWrapper()
     expect(wrapper.find(selectors.loadingIndicator).exists()).toBeFalsy()
   })
-  it('should render when loading', async () => {
-    const { wrapper } = getWrapper()
-    wrapper.vm.isLoading = true
-    await wrapper.vm.$nextTick()
+  it('should render when loading', () => {
+    const { wrapper } = getWrapper({ isLoading: true })
     expect(wrapper.find(selectors.loadingIndicator).exists()).toBeTruthy()
   })
   describe('indeterminate', () => {
-    it('progress bar should be in indeterminate when no progress given', async () => {
-      const { wrapper } = getWrapper()
-      wrapper.vm.isLoading = true
-      await wrapper.vm.$nextTick()
+    it('progress bar should be in indeterminate when no progress given', () => {
+      const { wrapper } = getWrapper({ isLoading: true })
       expect(wrapper.findComponent<any>(selectors.progressStub).props('indeterminate')).toBeTruthy()
     })
-    it('progress bar should not be in indeterminate when progress given', async () => {
-      const { wrapper } = getWrapper()
-      wrapper.vm.isLoading = true
-      wrapper.vm.currentProgress = 50
-      await wrapper.vm.$nextTick()
+    it('progress bar should not be in indeterminate when progress given', () => {
+      const { wrapper } = getWrapper({ isLoading: true, currentProgress: 50 })
       expect(wrapper.findComponent<any>(selectors.progressStub).props('indeterminate')).toBeFalsy()
     })
   })
 })
 
-function getWrapper() {
+function getWrapper({ isLoading = false, currentProgress = null } = {}) {
   return {
     wrapper: shallowMount(LoadingIndicator, {
       global: {
-        plugins: [...defaultPlugins()]
+        plugins: [...defaultPlugins()],
+        mocks: { $loadingService: mock<LoadingService>({ isLoading, currentProgress }) }
       }
     })
   }
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
index be99b7db1a1..688671fd1ec 100644
--- a/packages/web-runtime/src/container/bootstrap.ts
+++ b/packages/web-runtime/src/container/bootstrap.ts
@@ -12,7 +12,7 @@ import { useLocalStorage } from 'web-pkg/src/composables'
 import { unref } from 'vue'
 import { useDefaultThemeName } from '../composables'
 import { authService } from '../services/auth'
-import { clientService } from 'web-pkg/src/services'
+import { clientService, LoadingService } from 'web-pkg/src/services'
 import { UppyService } from '../services/uppyService'
 import { default as storeOptions } from '../store'
 import { init as sentryInit } from '@sentry/vue'
@@ -275,6 +275,14 @@ export const announceClientService = ({
   })
 }
 
+/**
+ * @param vue
+ */
+export const announceLoadingService = ({ app }: { app: App }): void => {
+  const loadingService = new LoadingService()
+  app.config.globalProperties.$loadingService = loadingService
+}
+
 /**
  * announce uppyService and inject it into vue
  *
diff --git a/packages/web-runtime/src/index.ts b/packages/web-runtime/src/index.ts
index 6d414acc6c2..d565db5a987 100644
--- a/packages/web-runtime/src/index.ts
+++ b/packages/web-runtime/src/index.ts
@@ -20,7 +20,8 @@ import {
   announceUppyService,
   announceAuthService,
   startSentry,
-  announceCustomScripts
+  announceCustomScripts,
+  announceLoadingService
 } from './container/bootstrap'
 import { applicationStore } from './container/store'
 import {
@@ -64,6 +65,7 @@ export const bootstrapApp = async (configurationPath: string): Promise<void> =>
   announceTranslations({ app, availableLanguages: supportedLanguages, translations })
   announceClientService({ app, runtimeConfiguration })
   announceUppyService({ app })
+  announceLoadingService({ app })
   await announceClient(runtimeConfiguration)
   await announceAuthService({ app, configurationManager, store, router })
   announceCustomStyles({ runtimeConfiguration })
diff --git a/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts b/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
index 950a0b23321..b6c26333212 100644
--- a/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
+++ b/packages/web-test-helpers/src/mocks/defaultComponentMocks.ts
@@ -1,5 +1,5 @@
-import { mockDeep } from 'jest-mock-extended'
-import { ClientService } from 'web-pkg/src/services'
+import { mock, mockDeep } from 'jest-mock-extended'
+import { ClientService, LoadingService } from 'web-pkg/src/services'
 import { Router, RouteLocationNormalizedLoaded, RouteLocationRaw, RouteLocation } from 'vue-router'
 import { UppyService } from 'web-runtime/src/services/uppyService'
 import { OwnCloudSdk } from 'web-client/src/types'
@@ -22,6 +22,11 @@ export const defaultComponentMocks = ({ currentRoute = undefined }: ComponentMoc
     $route,
     $clientService: mockDeep<ClientService>(),
     $client: mockDeep<OwnCloudSdk>(),
-    $uppyService: mockDeep<UppyService>()
+    $uppyService: mockDeep<UppyService>(),
+    $loadingService: mock<LoadingService>({
+      addTask: (callback) => {
+        return callback({ setProgress: jest.fn() })
+      }
+    })
   }
 }