IssueNotesRefactor: Show placeholder note immediately when editing.

Obviously not one of the best commits I always do.

3 files changed, 46 insertions, 7 deletions

diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
index 659043d9fa1..3483f6c7538 100644
--- a/app/assets/javascripts/notes/components/issue_note.vue
+++ b/app/assets/javascripts/notes/components/issue_note.vue
@@ -19,6 +19,7 @@
       return {
         isEditing: false,
         isDeleting: false,
+        isRequesting: false,
       };
     },
     components: {
@@ -37,7 +38,8 @@
       },
       classNameBindings() {
         return {
-          'is-editing': this.isEditing,
+          'is-editing': this.isEditing && !this.isRequesting,
+          'is-requesting being-posted': this.isRequesting,
           'disabled-content': this.isDeleting,
           target: this.targetNoteHash === this.noteAnchorId,
         };
@@ -82,20 +84,27 @@
             note: { note: noteText },
           },
         };
+        this.isRequesting = true;
+        this.oldContent = this.note.note_html;
+        this.note.note_html = noteText;
 
         this.updateNote(data)
           .then(() => {
             this.isEditing = false;
+            this.isRequesting = false;
             $(this.$refs.noteBody.$el).renderGFM();
             this.$refs.noteBody.resetAutoSave();
             callback();
           })
           .catch(() => {
-            Flash(
-            'Something went wrong while editing your comment. Please try again.',
-            'alert',
-            $(parentElement));
-            callback();
+            this.isRequesting = false;
+            this.isEditing = true;
+            this.$nextTick(() => {
+              const msg = 'Something went wrong while editing your comment. Please try again.';
+              Flash(msg, 'alert', $(this.$el));
+              this.recoverNoteContent(noteText);
+              callback();
+            });
           });
       },
       formCancelHandler(shouldConfirm, isDirty) {
@@ -104,8 +113,18 @@
           if (!confirm('Are you sure you want to cancel editing this comment?')) return;
         }
         this.$refs.noteBody.resetAutoSave();
+        if (this.oldContent) {
+          this.note.note_html = this.oldContent;
+          this.oldContent = null;
+        }
         this.isEditing = false;
       },
+      recoverNoteContent(noteText) {
+        // we need to do this to prevent noteForm inconsistent content warning
+        // this is something we intentionally do so we need to recover the content
+        this.note.note = noteText;
+        this.$refs.noteBody.$refs.noteForm.note = noteText; // TODO: This could be better
+      },
     },
     created() {
       eventHub.$on('enterEditMode', ({ noteId }) => {
diff --git a/app/assets/javascripts/notes/components/issue_note_header.vue b/app/assets/javascripts/notes/components/issue_note_header.vue
index 3b658f00f1f..63aa3d777d0 100644
--- a/app/assets/javascripts/notes/components/issue_note_header.vue
+++ b/app/assets/javascripts/notes/components/issue_note_header.vue
@@ -85,12 +85,18 @@
         </span>
         <a
           :href="noteTimestampLink"
-          @click="updateTargetNoteHash">
+          @click="updateTargetNoteHash"
+          class="note-timestamp">
           <time-ago-tooltip
             :time="createdAt"
             tooltip-placement="bottom"
             />
         </a>
+        <i
+          class="fa fa-spinner fa-spin editing-spinner"
+          aria-label="Comment is being updated"
+          aria-hidden="true">
+        </i>
       </span>
     </span>
     <div
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 90cfa409139..838ca92d905 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -100,6 +100,20 @@ ul.notes {
       }
     }
 
+    .editing-spinner {
+      display: none;
+    }
+
+    &.is-requesting {
+      .note-timestamp {
+        display: none;
+      }
+
+      .editing-spinner {
+        display: inline-block;
+      }
+    }
+
     &.is-editing {
       .note-header,
       .note-text,