diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-11-12 14:48:13 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-11-12 14:48:13 +0000 |
commit | f93539af26dcc76de97a4e647f75308f3164cbf6 (patch) | |
tree | 4a01b1395f8a91d3cf05a1b8be46543bd1888d19 | |
parent | 72f9c7eb41820aebdf13459dade3884ed783718b (diff) | |
parent | a19c83dd7aa35ea79473d3cfc73bdcdc0dca5ec0 (diff) | |
download | gitlab-ce-f93539af26dcc76de97a4e647f75308f3164cbf6.tar.gz |
Merge branch 'discussion-perf-improvement' into 'master'
Improve initial rendering of discussion notes
See merge request gitlab-org/gitlab-ce!22607
9 files changed, 38 insertions, 23 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/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js index d3e9c7c88f0..41256fdd27a 100644 --- a/app/assets/javascripts/diffs/store/actions.js +++ b/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'))); }; diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue index 754c6e79ee4..10e80883c00 100644 --- a/app/assets/javascripts/notes/components/comment_form.vue +++ b/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); 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..a4ab079d258 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'; @@ -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 () => {}; diff --git a/changelogs/unreleased/discussion-perf-improvement.yml b/changelogs/unreleased/discussion-perf-improvement.yml new file mode 100644 index 00000000000..defff8a55f5 --- /dev/null +++ b/changelogs/unreleased/discussion-perf-improvement.yml @@ -0,0 +1,5 @@ +--- +title: Improve initial discussion rendering performance +merge_request: 22607 +author: +type: changed diff --git a/spec/javascripts/notes/stores/actions_spec.js b/spec/javascripts/notes/stores/actions_spec.js index 0c0bc45b201..fcdd834e4a0 100644 --- a/spec/javascripts/notes/stores/actions_spec.js +++ b/spec/javascripts/notes/stores/actions_spec.js @@ -396,6 +396,9 @@ describe('Actions Notes Store', () => { { type: 'updateMergeRequestWidget', }, + { + type: 'startTaskList', + }, ], done, ); |