From 4444cf45fbf8e2b5392b6516f04f683d759be2d8 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 7 May 2024 11:32:36 -0400
Subject: [PATCH] backport shoelace#1937

---
 src/components/tree-item/tree-item.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/tree-item/tree-item.ts b/src/components/tree-item/tree-item.ts
index e6bb46a6e..6ee005499 100644
--- a/src/components/tree-item/tree-item.ts
+++ b/src/components/tree-item/tree-item.ts
@@ -46,6 +46,8 @@ import type { CSSResultGroup, PropertyValueMap } from 'lit';
  * @csspart item--selected - Applied when the tree item is selected.
  * @csspart indentation - The tree item's indentation container.
  * @csspart expand-button - The container that wraps the tree item's expand button and spinner.
+ * @csspart spinner - The spinner that shows when a lazy tree item is in the loading state.
+ * @csspart spinner__base - The spinner's base part.
  * @csspart label - The tree item's label.
  * @csspart children - The container that wraps the tree item's nested children.
  * @csspart checkbox - The checkbox that shows when using multiselect.
@@ -253,7 +255,10 @@ export default class WaTreeItem extends WebAwesomeElement {
             })}
             aria-hidden="true"
           >
-            ${when(this.loading, () => html` <wa-spinner></wa-spinner> `)}
+            ${when(
+              this.loading,
+              () => html` <wa-spinner part="spinner" exportparts="base:spinner__base"></wa-spinner> `
+            )}
             <slot class="tree-item__expand-icon-slot" name="expand-icon">
               <wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
             </slot>