Replaced progress bar with spinner for members import uploader

no issue

- When an import is in progress showing completed progress bar is unusefull and confusing. For large imports it takes a lot longer to process the import itself than to upload the file, that's why it made sense to show a generic spinner untill a better solution is worked on (probably with introduction of jobs)

app/components/modal-import-members.hbs

@@ -43,9 +43,7 @@
                 </div>
             {{else}}
                 <div class="bg-whitegrey-l2 ba b--whitegrey br3 gh-image-uploader gh-members-import-spinner">
-                    <div class="gh-loading-content">
-                        <div class="gh-loading-spinner"></div>
-                    </div>
+                    <GhLoadingSpinner />
                 </div>
             {{/if}}
         {{/if}}
@@ -88,10 +86,8 @@
         {{/if}}
 
         {{#if this.uploading}}
-            <div class="progress-container pt20 pb20">
-                <div class="gh-progress-container-progress">
-                    <div class="gh-progress-bar {{if this.failureMessage "-error"}}" style={{this.progressStyle}}></div>
-                </div>
+            <div class="bg-whitegrey-l2 ba b--whitegrey br3 gh-image-uploader gh-members-import-spinner">
+                <GhLoadingSpinner />
             </div>
         {{/if}}
 

app/components/modal-import-members.js

@@ -82,7 +82,6 @@ export default ModalComponent.extend({
     fileData: null,
     mapping: null,
     paramName: 'membersfile',
-    uploadPercentage: 0,
     importResponse: null,
     failureMessage: null,
     validationErrors: null,
@@ -129,19 +128,6 @@ export default ModalComponent.extend({
         return formData;
     }),
 
-    progressStyle: computed('uploadPercentage', function () {
-        let percentage = this.uploadPercentage;
-        let width = '';
-
-        if (percentage > 0) {
-            width = `${percentage}%`;
-        } else {
-            width = '0';
-        }
-
-        return htmlSafe(`width: ${width}`);
-    }),
-
     init() {
         this._super(...arguments);
 
@@ -273,16 +259,7 @@ export default ModalComponent.extend({
             data: formData,
             processData: false,
             contentType: false,
-            dataType: 'text',
-            xhr: () => {
-                let xhr = new window.XMLHttpRequest();
-
-                xhr.upload.addEventListener('progress', (event) => {
-                    this._uploadProgress(event);
-                }, false);
-
-                return xhr;
-            }
+            dataType: 'text'
         }).then((importResponse) => {
             this._uploadSuccess(JSON.parse(importResponse));
         }).catch((error) => {
@@ -297,15 +274,6 @@ export default ModalComponent.extend({
         this.set('uploading', true);
     },
 
-    _uploadProgress(event) {
-        if (event.lengthComputable) {
-            run(() => {
-                let percentage = Math.round((event.loaded / event.total) * 100);
-                this.set('uploadPercentage', percentage);
-            });
-        }
-    },
-
     _uploadSuccess(importResponse) {
         if (importResponse.meta.stats.invalid && importResponse.meta.stats.invalid.errors) {
             importResponse.meta.stats.invalid.errors.forEach((error) => {