Add latest changes from gitlab-org/gitlab@master

3 files changed, 32 insertions, 35 deletions

diff --git a/app/assets/javascripts/work_items/components/work_item_detail.vue b/app/assets/javascripts/work_items/components/work_item_detail.vue
index 29d61ec6091..33d49583b04 100644
--- a/app/assets/javascripts/work_items/components/work_item_detail.vue
+++ b/app/assets/javascripts/work_items/components/work_item_detail.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlAlert } from '@gitlab/ui';
+import { GlAlert, GlSkeletonLoader } from '@gitlab/ui';
 import { i18n } from '../constants';
 import workItemQuery from '../graphql/work_item.query.graphql';
 import workItemTitleSubscription from '../graphql/work_item_title.subscription.graphql';
@@ -11,6 +11,7 @@ export default {
   i18n,
   components: {
     GlAlert,
+    GlSkeletonLoader,
     WorkItemActions,
     WorkItemTitle,
     WorkItemState,
@@ -80,23 +81,35 @@ export default {
       {{ error }}
     </gl-alert>
 
-    <div class="gl-display-flex">
-      <work-item-title
-        :loading="workItemLoading"
-        :work-item-id="workItem.id"
-        :work-item-title="workItem.title"
-        :work-item-type="workItemType"
-        class="gl-mr-5"
-        @error="error = $event"
-      />
-      <work-item-actions
-        :work-item-id="workItem.id"
-        :can-delete="canDelete"
-        class="gl-ml-auto gl-mt-5"
-        @workItemDeleted="handleWorkItemDeleted"
+    <div v-if="workItemLoading" class="gl-max-w-26 gl-py-5">
+      <gl-skeleton-loader :height="65" :width="240">
+        <rect width="240" height="20" x="5" y="0" rx="4" />
+        <rect width="100" height="20" x="5" y="45" rx="4" />
+      </gl-skeleton-loader>
+    </div>
+    <template v-else>
+      <div class="gl-display-flex">
+        <work-item-title
+          :work-item-id="workItem.id"
+          :work-item-title="workItem.title"
+          :work-item-type="workItemType"
+          class="gl-mr-5"
+          @error="error = $event"
+          @updated="$emit('workItemUpdated')"
+        />
+        <work-item-actions
+          :work-item-id="workItem.id"
+          :can-delete="canDelete"
+          class="gl-ml-auto gl-mt-5"
+          @workItemDeleted="handleWorkItemDeleted"
+          @error="error = $event"
+        />
+      </div>
+      <work-item-state
+        :work-item="workItem"
         @error="error = $event"
+        @updated="$emit('workItemUpdated')"
       />
-    </div>
-    <work-item-state :loading="workItemLoading" :work-item="workItem" @error="error = $event" />
+    </template>
   </section>
 </template>
diff --git a/app/assets/javascripts/work_items/components/work_item_state.vue b/app/assets/javascripts/work_items/components/work_item_state.vue
index ad92d077b25..7d4b48f847f 100644
--- a/app/assets/javascripts/work_items/components/work_item_state.vue
+++ b/app/assets/javascripts/work_items/components/work_item_state.vue
@@ -1,5 +1,4 @@
 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import Tracking from '~/tracking';
 import {
@@ -14,16 +13,10 @@ import ItemState from './item_state.vue';
 
 export default {
   components: {
-    GlLoadingIcon,
     ItemState,
   },
   mixins: [Tracking.mixin()],
   props: {
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     workItem: {
       type: Object,
       required: true,
@@ -94,9 +87,8 @@ export default {
 </script>
 
 <template>
-  <gl-loading-icon v-if="loading" class="gl-mt-3" size="md" />
   <item-state
-    v-else-if="workItem.state"
+    v-if="workItem.state"
     :state="workItem.state"
     :loading="updateInProgress"
     @changed="updateWorkItemState"
diff --git a/app/assets/javascripts/work_items/components/work_item_title.vue b/app/assets/javascripts/work_items/components/work_item_title.vue
index 88a825853cc..73b46bb06d2 100644
--- a/app/assets/javascripts/work_items/components/work_item_title.vue
+++ b/app/assets/javascripts/work_items/components/work_item_title.vue
@@ -1,5 +1,4 @@
 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import { i18n } from '../constants';
 import updateWorkItemMutation from '../graphql/update_work_item.mutation.graphql';
@@ -7,16 +6,10 @@ import ItemTitle from './item_title.vue';
 
 export default {
   components: {
-    GlLoadingIcon,
     ItemTitle,
   },
   mixins: [Tracking.mixin()],
   props: {
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     workItemId: {
       type: String,
       required: false,
@@ -68,6 +61,5 @@ export default {
 </script>
 
 <template>
-  <gl-loading-icon v-if="loading" class="gl-mt-3" size="md" />
-  <item-title v-else :title="workItemTitle" @title-changed="updateTitle" />
+  <item-title :title="workItemTitle" @title-changed="updateTitle" />
 </template>