Added loading indicator to each section on the merge request dashboard

app/assets/javascripts/merge_request_dashboard/components/app.vue

@@ -32,8 +32,23 @@ export default {
       :variables="list.variables"
       :class="{ 'gl-mb-4': i !== lists.length - 1 }"
     >
-      <template #default="{ mergeRequests, count, hasNextPage, loadMore, loadingMore }">
-        <collapsible-section :count="count" :title="list.title">
+      <template #default="{ mergeRequests, count, hasNextPage, loadMore, loading }">
+        <collapsible-section :count="count" :loading="loading" :title="list.title">
+          <div v-if="!mergeRequests.length && loading" class="gl-bg-white gl-p-5 gl-rounded-base">
+            <div class="gl-display-flex gl-mb-2">
+              <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-w-20 gl-mt-1"></div>
+              <div class="gl-ml-auto gl-display-flex">
+                <div class="gl-animate-skeleton-loader gl-h-6 gl-rounded-full gl-w-6"></div>
+                <div class="gl-animate-skeleton-loader gl-h-6 gl-ml-4 gl-rounded-full gl-w-6"></div>
+              </div>
+            </div>
+            <div class="gl-display-flex">
+              <div class="gl-animate-skeleton-loader gl-h-3 gl-rounded-base gl-w-30"></div>
+              <div
+                class="gl-animate-skeleton-loader gl-h-3 gl-rounded-base gl-w-20 gl-ml-auto"
+              ></div>
+            </div>
+          </div>
           <merge-request
             v-for="(mergeRequest, index) in mergeRequests"
             :key="mergeRequest.id"
@@ -41,7 +56,7 @@ export default {
             :class="{ 'gl-mb-3': index !== mergeRequests.length - 1 }"
           />
           <div v-if="hasNextPage" class="gl-display-flex gl-justify-content-center gl-mt-4">
-            <gl-button :loading="loadingMore" data-testid="load-more" @click="loadMore">{{
+            <gl-button :loading="loading" data-testid="load-more" @click="loadMore">{{
               __('Show more')
             }}</gl-button>
           </div>

app/assets/javascripts/merge_request_dashboard/components/collapsible_section.vue

@@ -14,12 +14,13 @@ export default {
     },
     count: {
       type: Number,
-      required: true,
+      required: false,
+      default: null,
     },
   },
   data() {
     return {
-      open: this.count > 0,
+      open: true,
     };
   },
   computed: {

app/assets/javascripts/merge_request_dashboard/components/merge_requests_query.vue

@@ -31,37 +31,35 @@ export default {
   },
   data() {
     return {
-      mergeRequests: {},
-      loadingMore: false,
+      mergeRequests: null,
     };
   },
   computed: {
+    isLoading() {
+      return this.$apollo.queries.mergeRequests.loading;
+    },
     hasNextPage() {
-      return this.mergeRequests.pageInfo?.hasNextPage;
+      return this.mergeRequests?.pageInfo?.hasNextPage;
     },
   },
   methods: {
     async loadMore() {
-      this.loadingMore = true;
-
       await this.$apollo.queries.mergeRequests.fetchMore({
         variables: {
           ...this.variables,
           perPage: 10,
-          afterCursor: this.mergeRequests.pageInfo?.endCursor,
+          afterCursor: this.mergeRequests?.pageInfo?.endCursor,
         },
       });
-
-      this.loadingMore = false;
     },
   },
   render() {
     return this.$scopedSlots.default({
-      mergeRequests: this.mergeRequests.nodes || [],
-      count: this.mergeRequests.count || 0,
+      mergeRequests: this.mergeRequests?.nodes || [],
+      count: this.mergeRequests ? this.mergeRequests.count : null,
       hasNextPage: this.hasNextPage,
       loadMore: this.loadMore,
-      loadingMore: this.loadingMore,
+      loading: this.isLoading,
     });
   },
 };

spec/frontend/merge_request_dashboard/components/collapsible_section_spec.js

@@ -23,14 +23,14 @@ describe('Merge request dashboard collapsible section', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('collapses by default', () => {
-    createComponent(0);
+  it('expands collapsed content', async () => {
+    createComponent(1);
 
-    expect(wrapper.findByTestId('section-content').exists()).toBe(false);
-  });
+    wrapper.findByTestId('section-toggle-button').vm.$emit('click');
 
-  it('expands collapsed content', async () => {
-    createComponent(0);
+    await nextTick();
+
+    expect(wrapper.findByTestId('section-content').exists()).toBe(false);
 
     wrapper.findByTestId('section-toggle-button').vm.$emit('click');