diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue
index 0361c31223e736625b7e2d5bdf81bdeca998f8e9..1a881335082aa668cee767c2683c98e1a642dac5 100644
--- a/app/assets/javascripts/notes/components/issue_discussion.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion.vue
@@ -8,6 +8,8 @@ import IssueNoteActions from './issue_note_actions.vue';
 import IssueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
 import IssueNoteEditedText from './issue_note_edited_text.vue';
 import IssueNoteForm from './issue_note_form.vue';
+import PlaceholderNote from './issue_placeholder_note.vue';
+import PlaceholderSystemNote from './issue_placeholder_system_note.vue';
 
 export default {
   props: {
@@ -41,8 +43,23 @@ export default {
     IssueNoteEditedText,
     IssueNoteSignedOutWidget,
     IssueNoteForm,
+    PlaceholderNote,
+    PlaceholderSystemNote,
   },
   methods: {
+    component(note) {
+      if (note.isPlaceholderNote) {
+        if (note.placeholderType === 'systemNote') {
+          return PlaceholderSystemNote;
+        }
+        return PlaceholderNote;
+      }
+
+      return IssueNote;
+    },
+    componentData(note) {
+      return note.isPlaceholderNote ? note.notes[0] : note;
+    },
     toggleDiscussion() {
       this.$store.commit('toggleDiscussion', {
         discussionId: this.note.id,
@@ -65,6 +82,7 @@ export default {
     saveReply({ note }) {
       const replyData = {
         endpoint: this.newNotePath,
+        flashContainer: this.$el,
         data: {
           in_reply_to_discussion_id: this.note.reply_id,
           target_type: 'issue',
@@ -120,10 +138,11 @@ export default {
             <div class="panel panel-default">
               <div class="discussion-notes">
                 <ul class="notes">
-                  <issue-note
+                  <component
                     v-for="note in note.notes"
-                    key="note.id"
-                    :note="note" />
+                    :is="component(note)"
+                    :note="componentData(note)"
+                    key="note.id" />
                 </ul>
                 <div class="flash-container"></div>
                 <div class="discussion-reply-holder">
diff --git a/app/assets/javascripts/notes/stores/issue_notes_store.js b/app/assets/javascripts/notes/stores/issue_notes_store.js
index 6942e26e1389335a32309e263e0c601320083f43..9f570c0e5b1721882a37e9bc3308ca387357df8c 100644
--- a/app/assets/javascripts/notes/stores/issue_notes_store.js
+++ b/app/assets/javascripts/notes/stores/issue_notes_store.js
@@ -110,7 +110,12 @@ const mutations = {
     storeState.lastFetchedAt = fetchedAt;
   },
   showPlaceholderNote(storeState, data) {
-    storeState.notes.push({
+    let notesArr = storeState.notes;
+    if (data.replyId) {
+      notesArr = findNoteObjectById(notesArr, data.replyId).notes;
+    }
+
+    notesArr.push({
       individual_note: true,
       isPlaceholderNote: true,
       placeholderType: data.isSystemNote ? 'systemNote' : 'note',
@@ -125,7 +130,16 @@ const mutations = {
     const { notes } = storeState;
 
     for (let i = notes.length - 1; i >= 0; i -= 1) {
-      if (notes[i].isPlaceholderNote) {
+      const note = notes[i];
+      const children = note.notes;
+
+      if (children.length && !note.individual_note) { // remove placeholder from discussions
+        for (let j = children.length - 1; j >= 0; j -= 1) {
+          if (children[j].isPlaceholderNote) {
+            children.splice(j, 1);
+          }
+        }
+      } else if (note.isPlaceholderNote) { // remove placeholders from state root
         notes.splice(i, 1);
       }
     }
@@ -166,6 +180,8 @@ const actions = {
       .then(res => res.json())
       .then((res) => {
         context.commit('addNewReplyToDiscussion', res);
+
+        return res;
       });
   },
   createNewNote(context, noteData) {
@@ -185,6 +201,8 @@ const actions = {
     const { note } = noteData.data.note;
     let placeholderText = note;
     const hasQuickActions = utils.hasQuickActions(placeholderText);
+    const replyId = noteData.data.in_reply_to_discussion_id;
+    const methodToDispatch = replyId ? 'replyToDiscussion' : 'createNewNote';
 
     if (hasQuickActions) {
       placeholderText = utils.stripQuickActions(placeholderText);
@@ -193,6 +211,7 @@ const actions = {
     if (placeholderText.length) {
       context.commit('showPlaceholderNote', {
         noteBody: placeholderText,
+        replyId,
       });
     }
 
@@ -200,12 +219,10 @@ const actions = {
       context.commit('showPlaceholderNote', {
         isSystemNote: true,
         noteBody: utils.getQuickActionText(note),
+        replyId,
       });
     }
 
-    const hasReplyId = noteData.data.in_reply_to_discussion_id;
-    const methodToDispatch = hasReplyId ? 'replyToDiscussion' : 'createNewNote';
-
     return context.dispatch(methodToDispatch, noteData)
       .then((res) => {
         const { errors } = res;
diff --git a/app/assets/javascripts/notes/stores/issue_notes_utils.js b/app/assets/javascripts/notes/stores/issue_notes_utils.js
index 6d08ba0ac7d788458c4ed4927b6c3c6fd2aab05c..5833630211ba60439f155b20ebe3d3ef288af7bb 100644
--- a/app/assets/javascripts/notes/stores/issue_notes_utils.js
+++ b/app/assets/javascripts/notes/stores/issue_notes_utils.js
@@ -29,4 +29,4 @@ export default {
   stripQuickActions(note) {
     return note.replace(REGEX_QUICK_ACTIONS, '').trim();
   },
-}
+};