From 9706964511e91b42e759044dda87988f0c854ec2 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 18 Nov 2025 15:31:51 -0500
Subject: [PATCH] Fix spinner when `<wa-tree-item>` is lazy loaded (#1786)

* fix spinner when lazy; closes #1678

* remove redundant entry
---
 packages/webawesome/docs/docs/resources/changelog.md      | 3 +--
 .../webawesome/src/components/tree-item/tree-item.css     | 8 ++++++--
 packages/webawesome/src/components/tree-item/tree-item.ts | 5 ++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index f67dea039..c9a2bf7ad 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -13,16 +13,15 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Next
 
-- 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in `<wa-card>` [issue:1671]
 - Fixed a bug in `<wa-slider>` that caused some touch devices to end up with the incorrect value [issue:1703]
 - Fixed a bug in `<wa-card>` that prevented some slots from being detected correctly [discuss:1450]
+- Fixed a bug in `<wa-tree-item>` that caused the spinner to not show when lazy loading [issue:1678]
 - Fixed a bug in `<wa-dropdown>` that caused the browser to hang when cancelling the `wa-hide` event [issue:1483]
 - Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
 
 ## 3.0.0
 
 - 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in the following elements [issue:1127]
-  - `<wa-badge>`
   - `<wa-button>`
   - `<wa-callout>`
   - `<wa-card>`
diff --git a/packages/webawesome/src/components/tree-item/tree-item.css b/packages/webawesome/src/components/tree-item/tree-item.css
index 11b3c9bb8..a34ed4d3d 100644
--- a/packages/webawesome/src/components/tree-item/tree-item.css
+++ b/packages/webawesome/src/components/tree-item/tree-item.css
@@ -73,12 +73,16 @@ slot:not([name])::slotted(wa-icon) {
   rotate: -90deg;
 }
 
-.tree-item-expanded slot[name='expand-icon'],
+.tree-item-expanded:not(.tree-item-loading) slot[name='expand-icon'],
 .tree-item:not(.tree-item-expanded) slot[name='collapse-icon'] {
   display: none;
 }
 
-.tree-item:not(.tree-item-has-expand-button) .expand-icon-slot {
+.tree-item:not(.tree-item-has-expand-button):not(.tree-item-loading) .expand-icon-slot {
+  display: none;
+}
+
+.tree-item-loading .expand-icon-slot wa-icon {
   display: none;
 }
 
diff --git a/packages/webawesome/src/components/tree-item/tree-item.ts b/packages/webawesome/src/components/tree-item/tree-item.ts
index 5c96b5629..dc15888d6 100644
--- a/packages/webawesome/src/components/tree-item/tree-item.ts
+++ b/packages/webawesome/src/components/tree-item/tree-item.ts
@@ -254,6 +254,7 @@ export default class WaTreeItem extends WebAwesomeElement {
           'tree-item-expanded': this.expanded,
           'tree-item-selected': this.selected,
           'tree-item-leaf': this.isLeaf,
+          'tree-item-loading': this.loading,
           'tree-item-has-expand-button': showExpandButton,
         })}"
       >
@@ -272,8 +273,10 @@ export default class WaTreeItem extends WebAwesomeElement {
               ${when(
                 this.loading,
                 () => html` <wa-spinner part="spinner" exportparts="base:spinner__base"></wa-spinner> `,
+                () => html`
+                  <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
+                `,
               )}
-              <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
             </slot>
             <slot class="expand-icon-slot" name="collapse-icon">
               <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>