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.
This commit is contained in:
parent
ef58a64039
commit
cfedc31b7a
|
@ -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() {
|
||||
|
|
|
@ -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);
|
||||
},
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 () => {};
|
||||
|
|
Loading…
Reference in New Issue