feat: Show loading indicator on file assembling

Signed-off-by: Kostiantyn Miakshyn <molodchick@gmail.com>

Author: Koc

cypress/components/UploadPicker/UploadPicker.cy.ts

@@ -39,7 +39,7 @@ describe('UploadPicker rendering', () => {
 		}
 		cy.mount(UploadPicker, { propsData })
 		cy.get('[data-cy-upload-picker]').should('be.visible')
-		cy.get('[data-cy-upload-picker]').shouldHaveTrimmedText('New')
+		cy.get('[data-cy-upload-picker]').shouldHaveTrimmedText('New   Processing...')
 		cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').should('exist')
 	})
 
@@ -68,7 +68,7 @@ describe('UploadPicker valid uploads', () => {
 		cy.mount(UploadPicker, { propsData }).as('uploadPicker')
 
 		// Label is displayed before upload
-		cy.get('[data-cy-upload-picker]').shouldHaveTrimmedText('New')
+		cy.get('[data-cy-upload-picker]').shouldHaveTrimmedText('New   Processing...')
 
 		// Check and init aliases
 		cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
@@ -108,7 +108,7 @@ describe('UploadPicker valid uploads', () => {
 				.should('not.be.visible')
 
 			// Label is displayed again after upload
-			cy.get('[data-cy-upload-picker] button').shouldHaveTrimmedText('New')
+			cy.get('[data-cy-upload-picker] button').shouldHaveTrimmedText('New   Processing...')
 		})
 	})
 })

l10n/messages.pot

@@ -79,6 +79,9 @@ msgstr ""
 msgid "Preview image"
 msgstr ""
 
+msgid "Processing..."
+msgstr ""
+
 msgid "Rename"
 msgstr ""
 

lib/components/UploadPicker.vue

@@ -126,6 +126,11 @@
 			</template>
 		</NcButton>
 
+		<div v-show="!isUploading && isAssembling" class="upload-picker__loading">
+			<NcLoadingIcon />
+			<p>{{ t('Processing...') }}</p>
+		</div>
+
 		<!-- Hidden files picker input -->
 		<input ref="input"
 			:accept="accept?.join?.(', ')"
@@ -144,14 +149,15 @@ import type { Upload } from '../upload.ts'
 
 import { Folder, NewMenuEntryCategory, getNewFileMenuEntries } from '@nextcloud/files'
 import makeEta from 'simple-eta'
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionCaption from '@nextcloud/vue/dist/Components/NcActionCaption.js'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
 
 import IconCancel from 'vue-material-design-icons/Cancel.vue'
@@ -166,7 +172,7 @@ import { t } from '../utils/l10n.ts'
 import logger from '../utils/logger.ts'
 import { uploadConflictHandler } from '../utils/conflicts.ts'
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'UploadPicker',
 
 	components: {
@@ -180,6 +186,7 @@ export default Vue.extend({
 		NcActions,
 		NcButton,
 		NcIconSvgWrapper,
+		NcLoadingIcon,
 		NcProgressBar,
 	},
 
@@ -293,7 +300,7 @@ export default Vue.extend({
 			return this.queue?.filter((upload: Upload) => upload.status === UploadStatus.FAILED).length !== 0
 		},
 		isUploading() {
-			return this.queue?.length > 0
+			return this.queue?.filter((upload: Upload) => upload.status === UploadStatus.UPLOADING).length !== 0
 		},
 		isAssembling() {
 			return this.queue?.filter((upload: Upload) => upload.status === UploadStatus.ASSEMBLING).length !== 0
@@ -394,7 +401,6 @@ export default Vue.extend({
 			return Array.isArray(this.content) ? this.content : await this.content(path)
 		},
 
-
 		/**
 		 * Start uploading
 		 */
@@ -507,6 +513,12 @@ $progress-width: 200px;
 	&--paused &__progress {
 		animation: breathing 3s ease-out infinite normal;
 	}
+
+	&__loading {
+		display: flex;
+		margin-left: 8px;
+		gap: 8px;
+	}
 }
 
 @keyframes breathing {

lib/uploader.ts

@@ -7,7 +7,14 @@ import type { WebDAVClient } from 'webdav'
 import type { IDirectory } from './utils/fileTree'
 
 import { getCurrentUser } from '@nextcloud/auth'
-import { FileType, Folder, Permission, davGetClient, davRemoteURL, davRootPath } from '@nextcloud/files'
+import {
+	davGetClient,
+	davRemoteURL,
+	davRootPath,
+	FileType,
+	Folder,
+	Permission,
+} from '@nextcloud/files'
 import { encodePath } from '@nextcloud/paths'
 import { normalize } from 'path'
 
@@ -509,6 +516,11 @@ export class Uploader {
 					await Promise.all(chunksQueue)
 					this.updateStats()
 
+					// re-add upload because it was reset
+					this._uploadQueue.push(upload)
+					upload.status = UploadStatus.ASSEMBLING
+					this.updateStats()
+
 					upload.response = await axios.request({
 						method: 'MOVE',
 						url: `${tempUrl}/.file`,
@@ -520,8 +532,9 @@ export class Uploader {
 						},
 					})
 
-					this.updateStats()
+					this._uploadQueue.push(upload)
 					upload.status = UploadStatus.FINISHED
+					this.updateStats()
 					logger.debug(`Successfully uploaded ${file.name}`, { file, upload })
 					resolve(upload)
 				} catch (error) {