Add loading message for spellcheck

client/src/components/content-blocks/assignment/Assignment.vue

@@ -15,6 +15,7 @@
         @changeDocumentUrl="changeDocumentUrl"
         @spellcheck="spellcheck"
         :user-input="submission"
+        :spellcheck-loading="spellcheckLoading"
         placeholder="Ergebnis erfassen"
         action="Ergebnis mit Lehrperson teilen"
         shared-msg="Das Ergebnis wurde mit der Lehrperson geteilt."
@@ -191,6 +192,7 @@
       },
       spellcheck() {
         let self = this;
+        this.spellcheckLoading = true;
         this.$apollo.mutate({
           mutation: SPELL_CHECK_MUTATION,
           variables: {
@@ -202,6 +204,8 @@
           update(store, {data: {spellCheck: {results}}}) {
             self.corrections = results;
           }
+        }).then(() => {
+          this.spellcheckLoading = false;
         });
       }
     },
@@ -239,7 +243,8 @@
         inputType: 'text',
         unsaved: false,
         saving: 0,
-        corrections: ''
+        corrections: '',
+        spellcheckLoading: false
       }
     }
   }

client/src/components/content-blocks/assignment/SubmissionForm.vue

@@ -20,7 +20,7 @@
         class="submission-form-container__submit submission-form-container__spellcheck button button--primary button--white-bg"
         v-if="spellcheck"
         @click="$emit('spellcheck')"
-      >Rechtschreibung prüfen
+      >{{spellcheckText}}
       </button>
       <div v-if="userInput.document">
         <document-block
@@ -65,6 +65,10 @@
         type: Boolean,
         default: false
       },
+      spellcheckLoading: {
+        type: Boolean,
+        default: false
+      },
       sharedMsg: String
     },
 
@@ -81,6 +85,14 @@
       },
       allowsDocuments() {
         return 'document' in this.userInput;
+      },
+      spellcheckText() {
+        if (!this.spellcheckLoading) {
+          return 'Rechtschreibung prüfen'
+
+        } else {
+          return 'Wird geprüft...'
+        }
       }
     },
 
@@ -129,6 +141,13 @@
         cursor: pointer;
       }
     }
+
+    &__spellcheck {
+      /* so the button does not change size when changing the text */
+      width: 235px;
+      text-align: center;
+      display: inline-block;
+    }
   }
 
 </style>