Merge branch 'fix-loading-indicator-for-paginated-notes' into 'master'

Fix position of loading indicator for issue notes

See merge request gitlab-org/gitlab!75133

app/assets/javascripts/notes/components/notes_app.vue

@@ -104,6 +104,10 @@ export default {
         });
       }
 
+      if (this.sortDirDesc) {
+        return skeletonNotes.concat(this.discussions);
+      }
+
       return this.discussions.concat(skeletonNotes);
     },
     canReply() {

spec/frontend/notes/components/__snapshots__/notes_app_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`note_app when sort direction is asc shows skeleton notes after the loaded discussions 1`] = `
+"<ul id=\\"notes-list\\" class=\\"notes main-notes-list timeline\\">
+  <noteable-discussion-stub discussion=\\"[object Object]\\" renderdifffile=\\"true\\" helppagepath=\\"\\" isoverviewtab=\\"true\\"></noteable-discussion-stub>
+  <skeleton-loading-container-stub></skeleton-loading-container-stub>
+  <discussion-filter-note-stub style=\\"display: none;\\"></discussion-filter-note-stub>
+</ul>"
+`;
+
+exports[`note_app when sort direction is desc shows skeleton notes before the loaded discussions 1`] = `
+"<ul id=\\"notes-list\\" class=\\"notes main-notes-list timeline\\">
+  <skeleton-loading-container-stub></skeleton-loading-container-stub>
+  <noteable-discussion-stub discussion=\\"[object Object]\\" renderdifffile=\\"true\\" helppagepath=\\"\\" isoverviewtab=\\"true\\"></noteable-discussion-stub>
+  <discussion-filter-note-stub style=\\"display: none;\\"></discussion-filter-note-stub>
+</ul>"
+`;

spec/frontend/notes/components/notes_app_spec.js

@@ -374,6 +374,9 @@ describe('note_app', () => {
     beforeEach(() => {
       store = createStore();
       store.state.discussionSortOrder = constants.DESC;
+      store.state.isLoading = true;
+      store.state.discussions = [mockData.discussionMock];
+
       wrapper = shallowMount(NotesApp, {
         propsData,
         store,
@@ -386,11 +389,18 @@ describe('note_app', () => {
     it('finds CommentForm before notes list', () => {
       expect(getComponentOrder()).toStrictEqual([TYPE_COMMENT_FORM, TYPE_NOTES_LIST]);
     });
+
+    it('shows skeleton notes before the loaded discussions', () => {
+      expect(wrapper.find('#notes-list').html()).toMatchSnapshot();
+    });
   });
 
   describe('when sort direction is asc', () => {
     beforeEach(() => {
       store = createStore();
+      store.state.isLoading = true;
+      store.state.discussions = [mockData.discussionMock];
+
       wrapper = shallowMount(NotesApp, {
         propsData,
         store,
@@ -403,6 +413,10 @@ describe('note_app', () => {
     it('finds CommentForm after notes list', () => {
       expect(getComponentOrder()).toStrictEqual([TYPE_NOTES_LIST, TYPE_COMMENT_FORM]);
     });
+
+    it('shows skeleton notes after the loaded discussions', () => {
+      expect(wrapper.find('#notes-list').html()).toMatchSnapshot();
+    });
   });
 
   describe('when multiple draft types are present', () => {