Commit e7916e10 authored by Jose Vargas's avatar Jose Vargas

Add skeleton loader to Analytics -> CI/CD page

parent 0c7f16fd
<script> <script>
import dateFormat from 'dateformat'; import dateFormat from 'dateformat';
import { GlColumnChart } from '@gitlab/ui/dist/charts'; import { GlColumnChart } from '@gitlab/ui/dist/charts';
import { GlAlert } from '@gitlab/ui'; import { GlAlert, GlSkeletonLoader } from '@gitlab/ui';
import { __, s__, sprintf } from '~/locale'; import { __, s__, sprintf } from '~/locale';
import { getDateInPast } from '~/lib/utils/datetime_utility'; import { getDateInPast } from '~/lib/utils/datetime_utility';
import getPipelineCountByStatus from '../graphql/queries/get_pipeline_count_by_status.query.graphql'; import getPipelineCountByStatus from '../graphql/queries/get_pipeline_count_by_status.query.graphql';
...@@ -50,6 +50,7 @@ export default { ...@@ -50,6 +50,7 @@ export default {
components: { components: {
GlAlert, GlAlert,
GlColumnChart, GlColumnChart,
GlSkeletonLoader,
StatisticsList, StatisticsList,
PipelinesAreaChart, PipelinesAreaChart,
}, },
...@@ -278,7 +279,8 @@ export default { ...@@ -278,7 +279,8 @@ export default {
<h4 class="gl-my-4">{{ s__('PipelineCharts|Overall statistics') }}</h4> <h4 class="gl-my-4">{{ s__('PipelineCharts|Overall statistics') }}</h4>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<statistics-list :counts="formattedCounts" /> <gl-skeleton-loader v-if="$apollo.queries.counts.loading" :lines="5" />
<statistics-list v-else :counts="formattedCounts" />
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<strong> <strong>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment