diff options
author | Fatih Acet <acetfatih@gmail.com> | 2018-06-29 07:22:07 +0000 |
---|---|---|
committer | Tim Zallmann <tzallmann@gitlab.com> | 2018-06-29 07:22:07 +0000 |
commit | d690cd9992dbd6a0d231f6c7ea1688ef90f9fc2e (patch) | |
tree | 02df5a6d7e6711612180cb155dfad0944a7454ca /app/assets/javascripts/notes/components/notes_app.vue | |
parent | 7c6d7accff0a4921d3c863a38382a6114ddb825e (diff) | |
download | gitlab-ce-d690cd9992dbd6a0d231f6c7ea1688ef90f9fc2e.tar.gz |
Prevent fetching diffs and discussions data unnecessarily on MR page
Diffstat (limited to 'app/assets/javascripts/notes/components/notes_app.vue')
-rw-r--r-- | app/assets/javascripts/notes/components/notes_app.vue | 28 |
1 files changed, 22 insertions, 6 deletions
diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue index 98f8b9af168..7853847fc37 100644 --- a/app/assets/javascripts/notes/components/notes_app.vue +++ b/app/assets/javascripts/notes/components/notes_app.vue @@ -3,6 +3,7 @@ import { mapGetters, mapActions } from 'vuex'; import { getLocationHash } from '../../lib/utils/url_utility'; import Flash from '../../flash'; import * as constants from '../constants'; +import eventHub from '../event_hub'; import noteableNote from './noteable_note.vue'; import noteableDiscussion from './noteable_discussion.vue'; import systemNote from '../../vue_shared/components/notes/system_note.vue'; @@ -49,7 +50,7 @@ export default { }; }, computed: { - ...mapGetters(['discussions', 'getNotesDataByProp', 'discussionCount']), + ...mapGetters(['isNotesFetched', 'discussions', 'getNotesDataByProp', 'discussionCount']), noteableType() { return this.noteableData.noteableType; }, @@ -61,19 +62,30 @@ export default { isSkeletonNote: true, }); } + return this.discussions; }, }, + watch: { + shouldShow() { + if (!this.isNotesFetched) { + this.fetchNotes(); + } + }, + }, created() { this.setNotesData(this.notesData); this.setNoteableData(this.noteableData); this.setUserData(this.userData); this.setTargetNoteHash(getLocationHash()); + eventHub.$once('fetchNotesData', this.fetchNotes); }, mounted() { - this.fetchNotes(); - const { parentElement } = this.$el; + if (this.shouldShow) { + this.fetchNotes(); + } + const { parentElement } = this.$el; if (parentElement && parentElement.classList.contains('js-vue-notes-event')) { parentElement.addEventListener('toggleAward', event => { const { awardName, noteId } = event.detail; @@ -93,6 +105,7 @@ export default { setLastFetchedAt: 'setLastFetchedAt', setTargetNoteHash: 'setTargetNoteHash', toggleDiscussion: 'toggleDiscussion', + setNotesFetchedState: 'setNotesFetchedState', }), getComponentName(discussion) { if (discussion.isSkeletonNote) { @@ -119,11 +132,13 @@ export default { }) .then(() => { this.isLoading = false; + this.setNotesFetchedState(true); }) .then(() => this.$nextTick()) .then(() => this.checkLocationHash()) .catch(() => { this.isLoading = false; + this.setNotesFetchedState(true); Flash('Something went wrong while fetching comments. Please try again.'); }); }, @@ -161,11 +176,12 @@ export default { <template> <div v-if="shouldShow" - id="notes"> + id="notes" + > <ul id="notes-list" - class="notes main-notes-list timeline"> - + class="notes main-notes-list timeline" + > <component v-for="discussion in allDiscussions" :is="getComponentName(discussion)" |