diff options
Diffstat (limited to 'app/assets/javascripts/design_management/components/toolbar/index.vue')
-rw-r--r-- | app/assets/javascripts/design_management/components/toolbar/index.vue | 12 |
1 files changed, 9 insertions, 3 deletions
diff --git a/app/assets/javascripts/design_management/components/toolbar/index.vue b/app/assets/javascripts/design_management/components/toolbar/index.vue index b84fe45b77e..6d571365306 100644 --- a/app/assets/javascripts/design_management/components/toolbar/index.vue +++ b/app/assets/javascripts/design_management/components/toolbar/index.vue @@ -1,5 +1,5 @@ <script> -import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { GlButton, GlIcon, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui'; import permissionsQuery from 'shared_queries/design_management/design_permissions.query.graphql'; import { __, s__, sprintf } from '~/locale'; import timeagoMixin from '~/vue_shared/mixins/timeago'; @@ -14,6 +14,7 @@ export default { components: { GlButton, GlIcon, + GlSkeletonLoader, DesignNavigation, DeleteButton, }, @@ -61,6 +62,10 @@ export default { type: String, required: true, }, + isLoading: { + type: Boolean, + required: true, + }, }, data() { return { @@ -113,7 +118,8 @@ export default { <gl-icon name="close" /> </router-link> <div class="gl-overflow-hidden gl-display-flex gl-align-items-center"> - <h2 class="gl-m-0 str-truncated-100 gl-font-base">{{ filename }}</h2> + <gl-skeleton-loader v-if="isLoading" :lines="1" /> + <h2 v-else class="gl-m-0 str-truncated-100 gl-font-base">{{ filename }}</h2> <small v-if="updatedAt" class="gl-text-gray-500">{{ updatedText }}</small> </div> </div> @@ -130,7 +136,7 @@ export default { v-gl-tooltip.bottom class="gl-ml-3" :is-deleting="isDeleting" - button-variant="warning" + button-variant="default" button-icon="archive" button-category="secondary" :title="s__('DesignManagement|Archive design')" |