UX: Adds 'Processing Upload' to the composer status area during upload optimization (#13556)

app/assets/javascripts/discourse/app/components/composer-editor.js

@@ -635,6 +635,7 @@ export default Component.extend({
         this.setProperties({
           uploadProgress: 0,
           isUploading: false,
+          isProcessingUpload: false,
           isCancellable: false,
         });
       }
@@ -675,6 +676,7 @@ export default Component.extend({
         this.setProperties({
           uploadProgress: 0,
           isUploading: true,
+          isProcessingUpload: true,
           isCancellable: false,
         });
       })
@@ -689,6 +691,7 @@ export default Component.extend({
         this.setProperties({
           uploadProgress: 0,
           isUploading: false,
+          isProcessingUpload: false,
           isCancellable: false,
         });
       });

app/assets/javascripts/discourse/app/controllers/composer.js

@@ -104,6 +104,7 @@ export default Controller.extend({
   prioritizedCategoryId: null,
   lastValidatedAt: null,
   isUploading: false,
+  isProcessingUpload: false,
   topic: null,
   linkLookup: null,
   showPreview: true,

app/assets/javascripts/discourse/app/templates/composer.hbs

@@ -118,6 +118,7 @@
                           popupMenuOptions=popupMenuOptions
                           draftStatus=model.draftStatus
                           isUploading=isUploading
+                          isProcessingUpload=isProcessingUpload
                           allowUpload=allowUpload
                           uploadIcon=uploadIcon
                           isCancellable=isCancellable
@@ -168,7 +169,11 @@
 
             {{#if isUploading}}
               <div id="file-uploading">
-                {{loading-spinner size="small"}}<span>{{i18n "upload_selector.uploading"}} {{uploadProgress}}%</span>
+                {{#if isProcessingUpload}}
+                  {{loading-spinner size="small"}}<span>{{i18n "upload_selector.processing"}}</span>
+                {{else}}
+                  {{loading-spinner size="small"}}<span>{{i18n "upload_selector.uploading"}} {{uploadProgress}}%</span>
+                {{/if}}
                 {{#if isCancellable}}
                   <a href id="cancel-file-upload" {{action "cancelUpload"}}>{{d-icon "times"}}</a>
                 {{/if}}

config/locales/client.en.yml

@@ -2247,6 +2247,7 @@ en:
       hint: "(you can also drag & drop into the editor to upload)"
       hint_for_supported_browsers: "you can also drag and drop or paste images into the editor"
       uploading: "Uploading"
+      processing: "Processing Upload"
       select_file: "Select File"
       default_image_alt_text: image
       supported_formats: "supported formats"