LIL-588 При создании курса висит браузер из-за загрузки больших фотографий

web/src/components/blocks/Image.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="kit__photo">
+  <div class="kit__photo" :class="{'loading': loading}">
     <svg class="icon icon-add-plus" v-if="!imageUrl">
       <use xlink:href="/static/img/sprite.svg#icon-add-plus"></use>
     </svg>
@@ -23,21 +23,37 @@
         methods: {
             onImageAdded(event) {
                 this.loading = true;
+                const maxSize = 1600;
                 let file = event.target.files[0];
-                let reader = new FileReader();
+                const reader = new FileReader();
                 reader.onload = () => {
-                    downscale(reader.result, 2000, 2000).then((dataURL) => {
+                    let img = document.createElement('img');
-                        api.uploadImage(dataURL, this.accessToken)
+                    img.onload = () => {
-                            .then((response) => {
+                        let w = 0;
-                                this.loading = false;
+                        let h = 0;
-                                this.$emit('update:imageId', response.data.id);
+                        if(img.width > img.height) {
-                                this.$emit('update:imageUrl', response.data.image);
+                            w = maxSize;
-                            })
+                            h = 0;
-                            .catch((error) => {
+                        }
-                                this.loading = false;
+                        else {
-                                console.log('error', error);
+                            w = 0;
-                            });
+                            h = maxSize;
-                    });
+                        }
+                        downscale(img.src, w, h).then((dataURL) => {
+                            img = null;
+                            api.uploadImage(dataURL, this.accessToken)
+                                .then((response) => {
+                                    this.loading = false;
+                                    this.$emit('update:imageId', response.data.id);
+                                    this.$emit('update:imageUrl', response.data.image);
+                                })
+                                .catch((error) => {
+                                    this.loading = false;
+                                    console.log('error', error);
+                                });
+                        });
+                    }
+                    img.src = reader.result;
                 };
                 if (file) {
                     reader.readAsDataURL(file);

web/src/sass/_common.sass

@@ -3463,6 +3463,24 @@ a.grey-link
     .icon
       font-size: 20px
       fill: #B5B5B5
+
+    &.loading &-image
+      visibility: hidden
+    &.loading
+      .icon
+        visibility: hidden
+      &:after
+        content: ''
+        position: absolute
+        top: 50%
+        left: 50%
+        width: 24px
+        height: 24px
+        margin: -12px 0 0 -12px
+        border: 3px solid #B5B5B5
+        border-left: 3px solid transparent
+        border-radius: 50%
+        animation: loading .6s infinite linear
   &__file
     position: absolute
     top: 0