diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index 7a53d053eec..216f6c62e69 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/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>
diff --git a/app/assets/stylesheets/framework/vue_transitions.scss b/app/assets/stylesheets/framework/vue_transitions.scss
index e07a177e153..e3bdc0b0199 100644
--- a/app/assets/stylesheets/framework/vue_transitions.scss
+++ b/app/assets/stylesheets/framework/vue_transitions.scss
@@ -1,9 +1,13 @@
 .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;
 }
diff --git a/changelogs/unreleased/57409-loading-button-transition.yml b/changelogs/unreleased/57409-loading-button-transition.yml
new file mode 100644
index 00000000000..3cf169d79de
--- /dev/null
+++ b/changelogs/unreleased/57409-loading-button-transition.yml
@@ -0,0 +1,5 @@
+---
+title: Prevent fade out transition on loading-button component.
+merge_request: 26428
+author:
+type: fixed