From cb8cffd169a07ffee39f7de14cc21dc9aec964c5 Mon Sep 17 00:00:00 2001
From: Lan Nguyen Thuy <lnt@umbraco.dk>
Date: Tue, 4 Nov 2025 11:09:16 +0700
Subject: [PATCH 1/2] make loader-bar on uui-menu-item fade in

---
 .../uui-menu-item/lib/uui-menu-item.element.ts   | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts
index a3ed89ffd..c7a10b588 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.element.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts
@@ -237,9 +237,9 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
           : this._renderLabelAsButton()}
 
         <slot id="actions-container" name="actions"></slot>
-        ${this.loading
-          ? html`<uui-loader-bar id="loader"></uui-loader-bar>`
-          : ''}
+        <uui-loader-bar
+          id="loader"
+          class=${this.loading ? 'visible' : ''}></uui-loader-bar>
       </div>
       ${this.showChildren ? html`<slot></slot>` : ''}
     `;
@@ -617,6 +617,16 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         --uui-button-height: calc(var(--uui-size-base-unit) * 4);
         margin-right: var(--uui-size-base-unit);
       }
+
+      #loader {
+        opacity: 0;
+        transition: opacity 120ms ease-in 60ms;
+        pointer-events: none;
+      }
+
+      #loader.visible {
+        opacity: 1;
+      }
     `,
   ];
 }

From 45834e7ece551cae44852267f9c1a7f37a6f7521 Mon Sep 17 00:00:00 2001
From: Lan Nguyen Thuy <lnt@umbraco.dk>
Date: Tue, 4 Nov 2025 15:34:52 +0700
Subject: [PATCH 2/2] use animation css

---
 .../lib/uui-menu-item.element.ts              | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/uui-menu-item/lib/uui-menu-item.element.ts b/packages/uui-menu-item/lib/uui-menu-item.element.ts
index c7a10b588..63ceae782 100644
--- a/packages/uui-menu-item/lib/uui-menu-item.element.ts
+++ b/packages/uui-menu-item/lib/uui-menu-item.element.ts
@@ -237,9 +237,9 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
           : this._renderLabelAsButton()}
 
         <slot id="actions-container" name="actions"></slot>
-        <uui-loader-bar
-          id="loader"
-          class=${this.loading ? 'visible' : ''}></uui-loader-bar>
+        ${this.loading
+          ? html`<uui-loader-bar id="loader"></uui-loader-bar>`
+          : ''}
       </div>
       ${this.showChildren ? html`<slot></slot>` : ''}
     `;
@@ -618,14 +618,15 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
         margin-right: var(--uui-size-base-unit);
       }
 
-      #loader {
-        opacity: 0;
-        transition: opacity 120ms ease-in 60ms;
-        pointer-events: none;
+      @keyframes fadeIn {
+        100% {
+          opacity: 1;
+        }
       }
 
-      #loader.visible {
-        opacity: 1;
+      uui-loader-bar {
+        opacity: 0;
+        animation: fadeIn 120ms ease-in 60ms forwards;
       }
     `,
   ];