Merge branch 'discussion-perf-improvement' into 'master'

Improve initial rendering of discussion notes

See merge request gitlab-org/gitlab-ce!22607

app/assets/javascripts/diffs/components/app.vue

@@ -128,6 +128,7 @@ export default {
     eventHub.$once('fetchedNotesData', this.setDiscussions);
   },
   methods: {
+    ...mapActions(['startTaskList']),
     ...mapActions('diffs', [
       'setBaseConfig',
       'fetchDiffFiles',
@@ -157,7 +158,13 @@ export default {
       if (this.isNotesFetched && !this.assignedDiscussions && !this.isLoading) {
         this.assignedDiscussions = true;
 
-        requestIdleCallback(() => this.assignDiscussionsToDiff(), { timeout: 1000 });
+        requestIdleCallback(
+          () =>
+            this.assignDiscussionsToDiff()
+              .then(this.$nextTick)
+              .then(this.startTaskList),
+          { timeout: 1000 },
+        );
       }
     },
     adjustView() {

app/assets/javascripts/diffs/store/actions.js

@@ -190,6 +190,7 @@ export const saveDiffDiscussion = ({ dispatch }, { note, formData }) => {
     .then(result => dispatch('updateDiscussion', result.discussion, { root: true }))
     .then(discussion => dispatch('assignDiscussionsToDiff', [discussion]))
     .then(() => dispatch('closeDiffFileCommentForm', formData.diffFile.fileHash))
+    .then(() => dispatch('startTaskList', null, { root: true }))
     .catch(() => createFlash(s__('MergeRequests|Saving the comment failed')));
 };
 

app/assets/javascripts/notes/components/comment_form.vue

@@ -6,7 +6,6 @@ import Autosize from 'autosize';
 import { __, sprintf } from '~/locale';
 import Flash from '../../flash';
 import Autosave from '../../autosave';
-import TaskList from '../../task_list';
 import {
   capitalizeFirstCharacter,
   convertToCamelCase,
@@ -146,7 +145,6 @@ export default {
     });
 
     this.initAutoSave();
-    this.initTaskList();
   },
   methods: {
     ...mapActions([
@@ -298,13 +296,6 @@ Please check your network connection and try again.`;
         ]);
       }
     },
-    initTaskList() {
-      return new TaskList({
-        dataType: 'note',
-        fieldName: 'note',
-        selector: '.notes',
-      });
-    },
     resizeTextarea() {
       this.$nextTick(() => {
         Autosize.update(this.$refs.textarea);

app/assets/javascripts/notes/components/note_body.vue

@@ -4,7 +4,6 @@ import noteEditedText from './note_edited_text.vue';
 import noteAwardsList from './note_awards_list.vue';
 import noteAttachment from './note_attachment.vue';
 import noteForm from './note_form.vue';
-import TaskList from '../../task_list';
 import autosave from '../mixins/autosave';
 
 export default {
@@ -37,14 +36,12 @@ export default {
   },
   mounted() {
     this.renderGFM();
-    this.initTaskList();
 
     if (this.isEditing) {
       this.initAutoSave(this.note);
     }
   },
   updated() {
-    this.initTaskList();
     this.renderGFM();
 
     if (this.isEditing) {
@@ -59,15 +56,6 @@ export default {
     renderGFM() {
       $(this.$refs['note-body']).renderGFM();
     },
-    initTaskList() {
-      if (this.canEdit) {
-        this.taskList = new TaskList({
-          dataType: 'note',
-          fieldName: 'note',
-          selector: '.notes',
-        });
-      }
-    },
     handleFormUpdate(note, parentElement, callback) {
       this.$emit('handleFormUpdate', note, parentElement, callback);
     },

app/assets/javascripts/notes/components/noteable_note.vue

@@ -46,6 +46,7 @@ export default {
         'is-requesting being-posted': this.isRequesting,
         'disabled-content': this.isDeleting,
         target: this.isTarget,
+        'is-editable': this.note.current_user.can_edit,
       };
     },
     canResolve() {

app/assets/javascripts/notes/components/notes_app.vue

@@ -122,6 +122,7 @@ export default {
       setTargetNoteHash: 'setTargetNoteHash',
       toggleDiscussion: 'toggleDiscussion',
       setNotesFetchedState: 'setNotesFetchedState',
+      startTaskList: 'startTaskList',
     }),
     getComponentName(discussion) {
       if (discussion.isSkeletonNote) {
@@ -157,6 +158,7 @@ export default {
           this.isFetching = false;
         })
         .then(() => this.$nextTick())
+        .then(() => this.startTaskList())
         .then(() => this.checkLocationHash())
         .catch(() => {
           this.setLoadingState(false);

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

+import Vue from 'vue';
 import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
 import Visibility from 'visibilityjs';
+import TaskList from '../../task_list';
 import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
 import * as types from './mutation_types';
@@ -58,12 +60,13 @@ export const deleteNote = ({ commit, dispatch }, note) =>
     dispatch('updateMergeRequestWidget');
   });
 
-export const updateNote = ({ commit }, { endpoint, note }) =>
+export const updateNote = ({ commit, dispatch }, { endpoint, note }) =>
   service
     .updateNote(endpoint, note)
     .then(res => res.json())
     .then(res => {
       commit(types.UPDATE_NOTE, res);
+      dispatch('startTaskList');
     });
 
 export const replyToDiscussion = ({ commit }, { endpoint, data }) =>
@@ -85,6 +88,7 @@ export const createNewNote = ({ commit, dispatch }, { endpoint, data }) =>
         commit(types.ADD_NEW_NOTE, res);
 
         dispatch('updateMergeRequestWidget');
+        dispatch('startTaskList');
       }
       return res;
     });
@@ -260,6 +264,8 @@ const pollSuccessCallBack = (resp, commit, state, getters, dispatch) => {
         commit(types.ADD_NEW_NOTE, note);
       }
     });
+
+    dispatch('startTaskList');
   }
 
   commit(types.SET_LAST_FETCHED_AT, resp.last_fetched_at);
@@ -368,5 +374,16 @@ export const setCommentsDisabled = ({ commit }, data) => {
   commit(types.DISABLE_COMMENTS, data);
 };
 
+export const startTaskList = ({ dispatch }) =>
+  Vue.nextTick(
+    () =>
+      new TaskList({
+        dataType: 'note',
+        fieldName: 'note',
+        selector: '.notes .is-editable',
+        onSuccess: () => dispatch('startTaskList'),
+      }),
+  );
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

changelogs/unreleased/discussion-perf-improvement.yml

+---
+title: Improve initial discussion rendering performance
+merge_request: 22607
+author:
+type: changed

spec/javascripts/notes/stores/actions_spec.js

@@ -396,6 +396,9 @@ describe('Actions Notes Store', () => {
             {
               type: 'updateMergeRequestWidget',
             },
+            {
+              type: 'startTaskList',
+            },
           ],
           done,
         );