Prevent fade out transition on loading-button

app/assets/javascripts/vue_shared/components/loading_button.vue

@@ -53,7 +53,7 @@ export default {
 
 <template>
   <button :class="containerClass" :disabled="loading || disabled" type="button" @click="onClick">
-    <transition name="fade">
+    <transition name="fade-in">
       <gl-loading-icon
         v-if="loading"
         :inline="true"
@@ -63,7 +63,7 @@ export default {
         class="js-loading-button-icon"
       />
     </transition>
-    <transition name="fade">
+    <transition name="fade-in">
       <slot>
         <span v-if="label" class="js-loading-button-label"> {{ label }} </span>
       </slot>

app/assets/stylesheets/framework/vue_transitions.scss

 .fade-enter-active,
-.fade-leave-active {
+.fade-leave-active,
+.fade-in-enter-active,
+.fade-out-leave-active {
   transition: opacity $sidebar-transition-duration $general-hover-transition-curve;
 }
 
 .fade-enter,
+.fade-in-enter,
+.fade-out-leave-to,
 .fade-leave-to {
   opacity: 0;
 }

changelogs/unreleased/57409-loading-button-transition.yml

+---
+title: Prevent fade out transition on loading-button component.
+merge_request: 26428
+author:
+type: fixed