diff --git a/app/assets/javascripts/diff_notes/components/resolve_comment_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_comment_btn.js.es6
index 5832435dcfe..cf006c460c8 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_comment_btn.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_comment_btn.js.es6
@@ -5,8 +5,7 @@
     },
     computed: {
       isDiscussionResolved: function () {
-        const discussion = CommentsStore.state[this.discussionId],
-              notes = CommentsStore.notesForDiscussion(this.discussionId);
+        const discussion = CommentsStore.state[this.discussionId];
 
         return discussion.isResolved();
       },
diff --git a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
index 47a317a07c4..47ea5a3cc04 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
+++ b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
@@ -11,8 +11,7 @@
     },
     data: function() {
       return {
-        discussions: CommentsStore.state,
-        loadingObject: CommentsStore.loading,
+        discussions: CommentsStore.state
       };
     },
     computed: {
@@ -27,7 +26,7 @@
         }
       },
       loading: function () {
-        return this.loadingObject[this.discussionId];
+        return this.discussions[this.discussionId].loading;
       }
     },
     methods: {
diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6 b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
index 33b7648f0b6..ed96af66c50 100644
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
@@ -27,7 +27,7 @@ $(() => {
     const $components = $('resolve-btn, resolve-discussion-btn, jump-to-discussion');
     if ($components.length) {
       $components.each(function () {
-        DiffNotesApp.$compile($(this).get(0))
+        DiffNotesApp.$compile($(this).get(0));
       });
     }
   }
diff --git a/app/assets/javascripts/diff_notes/models/disucssion.js.es6 b/app/assets/javascripts/diff_notes/models/disucssion.js.es6
index bbc940214dd..58e8529d1d3 100644
--- a/app/assets/javascripts/diff_notes/models/disucssion.js.es6
+++ b/app/assets/javascripts/diff_notes/models/disucssion.js.es6
@@ -2,6 +2,7 @@ class DiscussionModel {
   constructor (discussionId) {
     this.discussionId = discussionId;
     this.notes = {};
+    this.loading = false;
   }
 
   createNote (noteId, resolved, user) {
diff --git a/app/assets/javascripts/diff_notes/models/note.js b/app/assets/javascripts/diff_notes/models/note.js.es6
similarity index 100%
rename from app/assets/javascripts/diff_notes/models/note.js
rename to app/assets/javascripts/diff_notes/models/note.js.es6
diff --git a/app/assets/javascripts/diff_notes/services/resolve.js.es6 b/app/assets/javascripts/diff_notes/services/resolve.js.es6
index 0be938448b2..d929fba06b4 100644
--- a/app/assets/javascripts/diff_notes/services/resolve.js.es6
+++ b/app/assets/javascripts/diff_notes/services/resolve.js.es6
@@ -34,10 +34,12 @@
     }
 
     resolveAll(namespace, mergeRequestId, discussionId) {
+      const discussion = CommentsStore.state[discussionId];
+
       this.setCSRF();
       Vue.http.options.root = `/${namespace}`;
 
-      CommentsStore.loading[discussionId] = true;
+      discussion.loading = true;
 
       return this.discussionResource.save({
         mergeRequestId,
@@ -45,31 +47,28 @@
       }, {}).then((response) => {
         const data = response.data;
         const user = data ? data.resolved_by : null;
-        const discussion = CommentsStore.state[discussionId];
         discussion.resolveAllNotes(user);
-
-        CommentsStore.loading[discussionId] = false;
-
+        discussion.loading = false;
 
         this.updateUpdatedHtml(discussionId, data);
       });
     }
 
     unResolveAll(namespace, mergeRequestId, discussionId) {
+      const discussion = CommentsStore.state[discussionId];
+
       this.setCSRF();
       Vue.http.options.root = `/${namespace}`;
 
-      CommentsStore.loading[discussionId] = true;
+      discussion.loading = true;
 
       return this.discussionResource.delete({
         mergeRequestId,
         discussionId
       }, {}).then((response) => {
         const data = response.data;
-        const discussion = CommentsStore.state[discussionId];
         discussion.unResolveAllNotes();
-
-        CommentsStore.loading[discussionId] = false;
+        discussion.loading = false;
 
         this.updateUpdatedHtml(discussionId, data);
       });
diff --git a/app/assets/javascripts/diff_notes/stores/comments.js.es6 b/app/assets/javascripts/diff_notes/stores/comments.js.es6
index fbb71ca30af..cbbad68bc5b 100644
--- a/app/assets/javascripts/diff_notes/stores/comments.js.es6
+++ b/app/assets/javascripts/diff_notes/stores/comments.js.es6
@@ -1,7 +1,6 @@
 ((w) => {
   w.CommentsStore = {
     state: {},
-    loading: {},
     get: function (discussionId, noteId) {
       return this.state[discussionId].getNote(noteId);
     },
@@ -10,7 +9,6 @@
       if (!this.state[discussionId]) {
         discussion = new DiscussionModel(discussionId);
         Vue.set(this.state, discussionId, discussion);
-        Vue.set(this.loading, discussionId, false);
       }
 
       discussion.createNote(noteId, resolved, user);
@@ -27,7 +25,6 @@
 
       if (Object.keys(discussion.notes).length === 0) {
         Vue.delete(this.state, discussionId);
-        Vue.delete(this.loading, discussionId);
       }
     }
   };
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index c708bd46387..044119e841d 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -22,7 +22,7 @@
             - if access
               %span.note-role.hidden-xs= access
 
-            - if (note.resolvable? && can?(current_user, :resolve_note, note)) || (note.resolved? && !can?(current_user, :resolve_note, note))
+            - if note.resolvable?
               %resolve-btn{ ":namespace-path" => "'#{note.project.namespace.path}'",
                   ":project-path" => "'#{note.project.path}'",
                   ":discussion-id" => "'#{note.discussion_id}'",
@@ -30,6 +30,7 @@
                   ":resolved" => note.resolved?,
                   ":can-resolve" => can?(current_user, :resolve_note, note),
                   ":resolved-by" => "'#{note.resolved_by.try(:name)}'",
+                  "v-show" => "#{(note.resolvable? && can?(current_user, :resolve_note, note)) || (note.resolved? && !can?(current_user, :resolve_note, note))}",
                   "inline-template" => true,
                   "v-ref:note_#{note.id}" => true }
 
diff --git a/spec/features/merge_requests/diff_notes_resolve_spec.rb b/spec/features/merge_requests/diff_notes_resolve_spec.rb
index 487bc3179be..c7ab9fac126 100644
--- a/spec/features/merge_requests/diff_notes_resolve_spec.rb
+++ b/spec/features/merge_requests/diff_notes_resolve_spec.rb
@@ -332,11 +332,7 @@ feature 'Diff notes resolve', feature: true, js: true do
 
       it 'does not allow user to mark note as resolved' do
         page.within '.diff-content .note' do
-          expect(page).to have_selector('.line-resolve-btn.is-disabled')
-
-          find('.line-resolve-btn').click
-
-          expect(page).to have_selector('.line-resolve-btn.is-disabled')
+          expect(page).not_to have_selector('.line-resolve-btn')
         end
 
         page.within '.line-resolve-all-container' do
@@ -384,11 +380,7 @@ feature 'Diff notes resolve', feature: true, js: true do
 
     it 'does not allow user to mark note as resolved' do
       page.within '.diff-content .note' do
-        expect(page).to have_selector('.line-resolve-btn.is-disabled')
-
-        find('.line-resolve-btn').click
-
-        expect(page).to have_selector('.line-resolve-btn.is-disabled')
+        expect(page).not_to have_selector('.line-resolve-btn')
       end
 
       page.within '.line-resolve-all-container' do