Persist loading state while applying MR suggestion

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/250859

app/assets/javascripts/notes/stores/actions.js

@@ -435,6 +435,10 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
 };
 
 const pollSuccessCallBack = (resp, commit, state, getters, dispatch) => {
+  if (state.isResolvingDiscussion) {
+    return null;
+  }
+
   if (resp.notes?.length) {
     dispatch('updateOrCreateNotes', resp.notes);
     dispatch('startTaskList');
@@ -574,6 +578,9 @@ export const submitSuggestion = (
   const dispatchResolveDiscussion = () =>
     dispatch('resolveDiscussion', { discussionId }).catch(() => {});
 
+  commit(types.SET_RESOLVING_DISCUSSION, true);
+  dispatch('stopPolling');
+
   return Api.applySuggestion(suggestionId)
     .then(() => commit(types.APPLY_SUGGESTION, { discussionId, noteId, suggestionId }))
     .then(dispatchResolveDiscussion)
@@ -587,6 +594,10 @@ export const submitSuggestion = (
       const flashMessage = errorMessage || defaultMessage;
 
       Flash(__(flashMessage), 'alert', flashContainer);
+    })
+    .finally(() => {
+      commit(types.SET_RESOLVING_DISCUSSION, false);
+      dispatch('restartPolling');
     });
 };
 
@@ -605,6 +616,8 @@ export const submitSuggestionBatch = ({ commit, dispatch, state }, { flashContai
     });
 
   commit(types.SET_APPLYING_BATCH_STATE, true);
+  commit(types.SET_RESOLVING_DISCUSSION, true);
+  dispatch('stopPolling');
 
   return Api.applySuggestionBatch(suggestionIds)
     .then(() => Promise.all(applyAllSuggestions()))
@@ -621,7 +634,11 @@ export const submitSuggestionBatch = ({ commit, dispatch, state }, { flashContai
 
       Flash(__(flashMessage), 'alert', flashContainer);
     })
-    .finally(() => commit(types.SET_APPLYING_BATCH_STATE, false));
+    .finally(() => {
+      commit(types.SET_APPLYING_BATCH_STATE, false);
+      commit(types.SET_RESOLVING_DISCUSSION, false);
+      dispatch('restartPolling');
+    });
 };
 
 export const addSuggestionInfoToBatch = ({ commit }, { suggestionId, noteId, discussionId }) =>

app/assets/javascripts/notes/stores/modules/index.js

@@ -42,6 +42,7 @@ export default () => ({
       current_user: {},
       preview_note_path: 'path/to/preview',
     },
+    isResolvingDiscussion: false,
     commentsDisabled: false,
     resolvableDiscussionsCount: 0,
     unresolvedDiscussionsCount: 0,

app/assets/javascripts/notes/stores/mutation_types.js

@@ -38,6 +38,7 @@ export const SET_TIMELINE_VIEW = 'SET_TIMELINE_VIEW';
 export const SET_SELECTED_COMMENT_POSITION = 'SET_SELECTED_COMMENT_POSITION';
 export const SET_SELECTED_COMMENT_POSITION_HOVER = 'SET_SELECTED_COMMENT_POSITION_HOVER';
 export const SET_FETCHING_DISCUSSIONS = 'SET_FETCHING_DISCUSSIONS';
+export const SET_RESOLVING_DISCUSSION = 'SET_RESOLVING_DISCUSSION';
 
 // Issue
 export const CLOSE_ISSUE = 'CLOSE_ISSUE';

app/assets/javascripts/notes/stores/mutations.js

@@ -213,6 +213,10 @@ export default {
     }
   },
 
+  [types.SET_RESOLVING_DISCUSSION](state, isResolving) {
+    state.isResolvingDiscussion = isResolving;
+  },
+
   [types.UPDATE_NOTE](state, note) {
     const noteObj = utils.findNoteObjectById(state.discussions, note.discussion_id);
 

changelogs/unreleased/250859-mr-suggestion-retain-spinner.yml

+---
+title: Retain spinner when applying MR suggestions
+merge_request: 46203
+author:
+type: fixed

spec/frontend/notes/stores/actions_spec.js

@@ -944,10 +944,16 @@ describe('Actions Notes Store', () => {
     it('when service success, commits and resolves discussion', done => {
       testSubmitSuggestion(done, () => {
         expect(commit.mock.calls).toEqual([
+          [mutationTypes.SET_RESOLVING_DISCUSSION, true],
           [mutationTypes.APPLY_SUGGESTION, { discussionId, noteId, suggestionId }],
+          [mutationTypes.SET_RESOLVING_DISCUSSION, false],
         ]);
 
-        expect(dispatch.mock.calls).toEqual([['resolveDiscussion', { discussionId }]]);
+        expect(dispatch.mock.calls).toEqual([
+          ['stopPolling'],
+          ['resolveDiscussion', { discussionId }],
+          ['restartPolling'],
+        ]);
         expect(Flash).not.toHaveBeenCalled();
       });
     });
@@ -958,8 +964,11 @@ describe('Actions Notes Store', () => {
       Api.applySuggestion.mockReturnValue(Promise.reject(response));
 
       testSubmitSuggestion(done, () => {
-        expect(commit).not.toHaveBeenCalled();
-        expect(dispatch).not.toHaveBeenCalled();
+        expect(commit.mock.calls).toEqual([
+          [mutationTypes.SET_RESOLVING_DISCUSSION, true],
+          [mutationTypes.SET_RESOLVING_DISCUSSION, false],
+        ]);
+        expect(dispatch.mock.calls).toEqual([['stopPolling'], ['restartPolling']]);
         expect(Flash).toHaveBeenCalledWith(TEST_ERROR_MESSAGE, 'alert', flashContainer);
       });
     });
@@ -970,8 +979,11 @@ describe('Actions Notes Store', () => {
       Api.applySuggestion.mockReturnValue(Promise.reject(response));
 
       testSubmitSuggestion(done, () => {
-        expect(commit).not.toHaveBeenCalled();
-        expect(dispatch).not.toHaveBeenCalled();
+        expect(commit.mock.calls).toEqual([
+          [mutationTypes.SET_RESOLVING_DISCUSSION, true],
+          [mutationTypes.SET_RESOLVING_DISCUSSION, false],
+        ]);
+        expect(dispatch.mock.calls).toEqual([['stopPolling'], ['restartPolling']]);
         expect(Flash).toHaveBeenCalledWith(
           'Something went wrong while applying the suggestion. Please try again.',
           'alert',
@@ -1015,15 +1027,19 @@ describe('Actions Notes Store', () => {
       testSubmitSuggestionBatch(done, () => {
         expect(commit.mock.calls).toEqual([
           [mutationTypes.SET_APPLYING_BATCH_STATE, true],
+          [mutationTypes.SET_RESOLVING_DISCUSSION, true],
           [mutationTypes.APPLY_SUGGESTION, batchSuggestionsInfo[0]],
           [mutationTypes.APPLY_SUGGESTION, batchSuggestionsInfo[1]],
           [mutationTypes.CLEAR_SUGGESTION_BATCH],
           [mutationTypes.SET_APPLYING_BATCH_STATE, false],
+          [mutationTypes.SET_RESOLVING_DISCUSSION, false],
         ]);
 
         expect(dispatch.mock.calls).toEqual([
+          ['stopPolling'],
           ['resolveDiscussion', { discussionId: discussionIds[0] }],
           ['resolveDiscussion', { discussionId: discussionIds[1] }],
+          ['restartPolling'],
         ]);
 
         expect(Flash).not.toHaveBeenCalled();
@@ -1038,10 +1054,12 @@ describe('Actions Notes Store', () => {
       testSubmitSuggestionBatch(done, () => {
         expect(commit.mock.calls).toEqual([
           [mutationTypes.SET_APPLYING_BATCH_STATE, true],
+          [mutationTypes.SET_RESOLVING_DISCUSSION, true],
           [mutationTypes.SET_APPLYING_BATCH_STATE, false],
+          [mutationTypes.SET_RESOLVING_DISCUSSION, false],
         ]);
 
-        expect(dispatch).not.toHaveBeenCalled();
+        expect(dispatch.mock.calls).toEqual([['stopPolling'], ['restartPolling']]);
         expect(Flash).toHaveBeenCalledWith(TEST_ERROR_MESSAGE, 'alert', flashContainer);
       });
     });
@@ -1054,10 +1072,12 @@ describe('Actions Notes Store', () => {
       testSubmitSuggestionBatch(done, () => {
         expect(commit.mock.calls).toEqual([
           [mutationTypes.SET_APPLYING_BATCH_STATE, true],
+          [mutationTypes.SET_RESOLVING_DISCUSSION, true],
           [mutationTypes.SET_APPLYING_BATCH_STATE, false],
+          [mutationTypes.SET_RESOLVING_DISCUSSION, false],
         ]);
 
-        expect(dispatch).not.toHaveBeenCalled();
+        expect(dispatch.mock.calls).toEqual([['stopPolling'], ['restartPolling']]);
         expect(Flash).toHaveBeenCalledWith(
           'Something went wrong while applying the batch of suggestions. Please try again.',
           'alert',
@@ -1072,10 +1092,12 @@ describe('Actions Notes Store', () => {
       testSubmitSuggestionBatch(done, () => {
         expect(commit.mock.calls).toEqual([
           [mutationTypes.SET_APPLYING_BATCH_STATE, true],
+          [mutationTypes.SET_RESOLVING_DISCUSSION, true],
           [mutationTypes.APPLY_SUGGESTION, batchSuggestionsInfo[0]],
           [mutationTypes.APPLY_SUGGESTION, batchSuggestionsInfo[1]],
           [mutationTypes.CLEAR_SUGGESTION_BATCH],
           [mutationTypes.SET_APPLYING_BATCH_STATE, false],
+          [mutationTypes.SET_RESOLVING_DISCUSSION, false],
         ]);
 
         expect(Flash).not.toHaveBeenCalled();

spec/frontend/notes/stores/mutation_spec.js

@@ -377,6 +377,16 @@ describe('Notes Store mutations', () => {
     });
   });
 
+  describe('SET_RESOLVING_DISCUSSION', () => {
+    it('should set resolving discussion state', () => {
+      const state = {};
+
+      mutations.SET_RESOLVING_DISCUSSION(state, true);
+
+      expect(state.isResolvingDiscussion).toEqual(true);
+    });
+  });
+
   describe('UPDATE_NOTE', () => {
     it('should update a note', () => {
       const state = {