Improve initial rendering of discussion notes

This improves the initial rendering performance of notes
by only creating a new TaskList for the whole app,
rather than on a per-note component basis.

5 files changed, 21 insertions, 13 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 7c60fb3da42..f80e20a4391 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/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() {
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index cf4c35de42c..9375627359c 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/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);
     },
diff --git a/app/assets/javascripts/notes/components/noteable_note.vue b/app/assets/javascripts/notes/components/noteable_note.vue
index e302a89ee95..9ab91e2abe5 100644
--- a/app/assets/javascripts/notes/components/noteable_note.vue
+++ b/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() {
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index e555279a6ac..69ddfd751e0 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/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);
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 88739ffb083..e67b3a6a3f6 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -1,6 +1,8 @@
+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';
@@ -368,5 +370,13 @@ export const setCommentsDisabled = ({ commit }, data) => {
   commit(types.DISABLE_COMMENTS, data);
 };
 
+export const startTaskList = ({ dispatch }) =>
+  new TaskList({
+    dataType: 'note',
+    fieldName: 'note',
+    selector: '.notes .is-editable',
+    onSuccess: () => Vue.$nextTick(() => dispatch('startTaskList')),
+  });
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};