skeleton loading for notes

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} }