From 10dc8361ff6e2b5e78efee786402d8a004628b26 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 16 Feb 2022 15:11:59 +0100
Subject: [PATCH] Add loading spinner to document and image forms

---
 .../components/content-forms/DocumentForm.vue | 37 +++++++++++++++++--
 .../components/content-forms/ImageForm.vue    | 36 +++++++++++++++---
 client/src/components/icons/LoadingIcon.vue   |  2 +
 client/src/helpers/uploadcare.js              |  3 +-
 4 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/client/src/components/content-forms/DocumentForm.vue b/client/src/components/content-forms/DocumentForm.vue
index 154bc735..b5258bc6 100644
--- a/client/src/components/content-forms/DocumentForm.vue
+++ b/client/src/components/content-forms/DocumentForm.vue
@@ -7,6 +7,12 @@
       v-if="!value.url"
       ref="uploadcare-panel"
     />
+    <div
+      class="document-form__spinner"
+      v-if="loading"
+    >
+      <loading-icon class="document-form__loading-icon" />
+    </div>
     <div
       class="document-form__uploaded"
       v-if="value.url"
@@ -23,6 +29,7 @@
 
 <script>
   import {uploadcare} from '@/helpers/uploadcare';
+  import LoadingIcon from '@/components/icons/LoadingIcon';
 
   const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
 
@@ -30,7 +37,14 @@
     props: ['value', 'index'],
 
     components: {
-      DocumentIcon
+      LoadingIcon,
+      DocumentIcon,
+    },
+
+    data() {
+      return {
+        loading: false,
+      };
     },
 
     computed: {
@@ -46,19 +60,23 @@
           return parts[parts.length - 1];
         }
         return '';
-      }
+      },
     },
 
     mounted() {
       uploadcare(this, url => {
         this.$emit('change-url', url, this.index);
+        this.loading = false;
+      }, () => {
+        this.loading = true;
+
       });
     },
   };
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/variables";
+  @import "~styles/helpers";
 
   .document-form {
     &__uploaded {
@@ -70,6 +88,19 @@
       text-decoration: underline;
     }
 
+    &__spinner {
+      width: 100%;
+      height: 150px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__loading-icon {
+      @include spin;
+      fill: $color-silver-dark;
+    }
+
     &__icon {
       width: 30px;
       height: 30px;
diff --git a/client/src/components/content-forms/ImageForm.vue b/client/src/components/content-forms/ImageForm.vue
index f1fe337b..b35052be 100644
--- a/client/src/components/content-forms/ImageForm.vue
+++ b/client/src/components/content-forms/ImageForm.vue
@@ -10,12 +10,20 @@
       >Dokument</a> hoch.
     </div>
 
+    <div
+      class="image-form__spinner"
+      v-if="loading"
+    >
+      <loading-icon class="image-form__loading-icon" />
+    </div>
+
     <div
       v-if="!value.url"
       ref="uploadcare-panel"
     />
     <div v-if="value.url && !hadError">
       <img
+        alt=""
         :src="previewUrl"
         @error="error"
       >
@@ -25,15 +33,18 @@
 
 <script>
   import uploadcare from 'uploadcare-widget';
+  import LoadingIcon from '@/components/icons/LoadingIcon';
 
   export default {
     props: ['value', 'index'],
+    components: {LoadingIcon},
     data() {
       return {
         hadError: false,
         uploadcarePanel: null,
         url: '',
-        filename: ''
+        filename: '',
+        loading: false,
       };
     },
     computed: {
@@ -42,7 +53,7 @@
           return this.value.url + '-/preview/200x200/';
         }
         return null;
-      }
+      },
     },
     mounted() {
       this.mountUploadcare();
@@ -62,8 +73,10 @@
         });
 
         this.uploadcarePanel.done(panelResult => {
+          this.loading = true;
           panelResult.done(fileInfo => {
             this.hadError = false;
+            this.loading = false;
             this.url = fileInfo.cdnUrl;
             this.filename = fileInfo.name;
             this.$emit('change-url', fileInfo.cdnUrl, this.index);
@@ -76,10 +89,10 @@
       },
       switchToDocument() {
         this.$emit('switch-to-document', this.index, {
-          url: `${this.url}${this.filename}`
+          url: `${this.url}${this.filename}`,
         });
-      }
-    }
+      },
+    },
   };
 </script>
 
@@ -93,6 +106,19 @@
       line-height: 1.5;
     }
 
+    &__spinner {
+      width: 100%;
+      height: 150px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__loading-icon {
+      @include spin;
+      fill: $color-silver-dark;
+    }
+
     &__link {
       text-decoration: underline;
       @include regular-text;
diff --git a/client/src/components/icons/LoadingIcon.vue b/client/src/components/icons/LoadingIcon.vue
index 7abcacbc..d97f0aff 100644
--- a/client/src/components/icons/LoadingIcon.vue
+++ b/client/src/components/icons/LoadingIcon.vue
@@ -2,6 +2,8 @@
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
+    width="100"
+    height="100"
   >
     <path
       d="M91,47.5A2.5,2.5,0,0,0,88.5,50,38.5,38.5,0,1,1,50,11.5,38.09,38.09,0,0,1,76,21.64H62.13a2.45,2.45,0,0,0,0,4.9H84.31V4.36a2.45,2.45,0,1,0-4.9,0V18A43,43,0,0,0,50,6.5,43.5,43.5,0,1,0,93.5,50,2.5,2.5,0,0,0,91,47.5Z"
diff --git a/client/src/helpers/uploadcare.js b/client/src/helpers/uploadcare.js
index 2959ac8c..c406d2f9 100644
--- a/client/src/helpers/uploadcare.js
+++ b/client/src/helpers/uploadcare.js
@@ -1,4 +1,4 @@
-export const uploadcare = (component, callback) => import(/* webpackChunkName: "uploadcare" */'uploadcare-widget')
+export const uploadcare = (component, callback, onStart = () => {}) => import(/* webpackChunkName: "uploadcare" */'uploadcare-widget')
   .then(module => {
     const uploadcareWidget = module.default;
 
@@ -16,6 +16,7 @@ export const uploadcare = (component, callback) => import(/* webpackChunkName: "
     }, 0);
 
     return uploadcarePanel.done(panelResult => {
+      onStart();
       panelResult.done(fileInfo => {
         let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
         callback(urlWithFilename);