diff options
6 files changed, 43 insertions, 8 deletions
diff --git a/app/assets/javascripts/mr_notes/index.js b/app/assets/javascripts/mr_notes/index.js index a0c49ead77e..02695776435 100644 --- a/app/assets/javascripts/mr_notes/index.js +++ b/app/assets/javascripts/mr_notes/index.js @@ -22,6 +22,7 @@ document.addEventListener('DOMContentLoaded', () => { notesPath: notesDataset.notesPath, markdownDocsPath: notesDataset.markdownDocsPath, quickActionsDocsPath: notesDataset.quickActionsDocsPath, + totalNotes: notesDataset.totalNotes, }, }; }, diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue index 49f38aa728b..e5a067d0f9f 100644 --- a/app/assets/javascripts/notes/components/notes_app.vue +++ b/app/assets/javascripts/notes/components/notes_app.vue @@ -11,6 +11,7 @@ import placeholderNote from '../../vue_shared/components/notes/placeholder_note.vue'; import placeholderSystemNote from '../../vue_shared/components/notes/placeholder_system_note.vue'; import loadingIcon from '../../vue_shared/components/loading_icon.vue'; + import skeletonLoadingContainer from '../../vue_shared/components/notes/skeleton_note.vue'; export default { name: 'notesApp', @@ -56,6 +57,15 @@ return this.noteableData.merge_params ? MERGE_REQUEST_NOTEABLE_TYPE : NOTEABLE_TYPE; }, + allNotes() { + if (this.isLoading) { + const totalNotes = parseInt(this.notesData.totalNotes, 10) || 0; + return new Array(totalNotes).fill({ + isSkeletonNote: true, + }); + } + return this.notes; + }, }, methods: { ...mapActions({ @@ -70,6 +80,9 @@ setTargetNoteHash: 'setTargetNoteHash', }), getComponentName(note) { + if (note.isSkeletonNote) { + return skeletonLoadingContainer; + } if (note.isPlaceholderNote) { if (note.placeholderType === constants.SYSTEM_NOTE) { return placeholderSystemNote; @@ -135,19 +148,13 @@ <template> <div id="notes"> - <div - v-if="isLoading" - class="js-loading loading"> - <loading-icon /> - </div> - - <template v-if="!isLoading"> + <template> <ul id="notes-list" class="notes main-notes-list timeline"> <component - v-for="note in notes" + v-for="note in allNotes" :is="getComponentName(note)" :note="getComponentData(note)" :key="note.id" diff --git a/app/assets/javascripts/notes/index.js b/app/assets/javascripts/notes/index.js index d250dd8d25b..6e20ec6eeb1 100644 --- a/app/assets/javascripts/notes/index.js +++ b/app/assets/javascripts/notes/index.js @@ -28,6 +28,7 @@ document.addEventListener('DOMContentLoaded', () => new Vue({ notesPath: notesDataset.notesPath, markdownDocsPath: notesDataset.markdownDocsPath, quickActionsDocsPath: notesDataset.quickActionsDocsPath, + totalNotes: notesDataset.totalNotes, }, }; }, diff --git a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue new file mode 100644 index 00000000000..eeb29711699 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue @@ -0,0 +1,24 @@ +<template> + <li class="timeline-entry note"> + <div class="timeline-entry-inner"> + <div class="timeline-icon"> + </div> + <div class="timeline-content"> + <div class="note-header"></div> + <div class="note-body"> + <skeleton-loading-container /> + </div> + </div> + </div> + </li> +</template> + +<script> + import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue'; + + export default { + components: { + skeletonLoadingContainer, + } + }; +</script>
\ No newline at end of file diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml index 9779c1985d5..44ed76a376f 100644 --- a/app/views/projects/issues/_discussion.html.haml +++ b/app/views/projects/issues/_discussion.html.haml @@ -13,5 +13,6 @@ quick_actions_docs_path: help_page_path('user/project/quick_actions'), notes_path: notes_url, last_fetched_at: Time.now.to_i, + total_notes: @issue.notes.length, noteable_data: serialize_issuable(@issue), current_user_data: UserSerializer.new.represent(current_user, only_path: true).to_json } } diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml index 35d1923f81f..b55f35db753 100644 --- a/app/views/projects/merge_requests/show.html.haml +++ b/app/views/projects/merge_requests/show.html.haml @@ -94,6 +94,7 @@ markdown_docs_path: help_page_path('user/markdown'), quick_actions_docs_path: help_page_path('user/project/quick_actions'), notes_path: notes_url, + total_notes: @merge_request.notes.length, last_fetched_at: Time.now.to_i, issue_data: serialize_issuable(@merge_request), current_user_data: UserSerializer.new.represent(current_user).to_json} } |