From 49892e2a45ebb82c3b3827df1f49e142f76b7e02 Mon Sep 17 00:00:00 2001
From: "Marc .N" <marc.newton@esprofiler.com>
Date: Tue, 14 May 2024 15:38:55 +0100
Subject: [PATCH] fix(VTreeview): scoped loading state by child (#19773)

fixes #19390
---
 .../src/labs/VTreeview/VTreeviewChildren.tsx  | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
index a9bfd2c6ca6..85bf5e3c4d1 100644
--- a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
+++ b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
@@ -41,19 +41,22 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
   props: makeVTreeviewChildrenProps(),
 
   setup (props, { emit, slots }) {
-    const isLoading = shallowRef(false)
-    const hasLoaded = shallowRef(false)
+    const isLoading = shallowRef(null)
 
-    function checkChildren (item: unknown) {
+    function checkChildren (item: any) {
       return new Promise<void>(resolve => {
-        if (!props.items?.length || !props.loadChildren || hasLoaded.value) return resolve()
+        if (!props.items?.length || !props.loadChildren) return resolve()
 
-        isLoading.value = true
-        props.loadChildren(item).then(resolve)
-      }).then(() => {
-        hasLoaded.value = true
+        if (item?.children?.length === 0) {
+          isLoading.value = item.value
+          props.loadChildren(item).then(resolve)
+
+          return
+        }
+
+        resolve()
       }).finally(() => {
-        isLoading.value = false
+        isLoading.value = null
       })
     }
 
@@ -64,6 +67,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
     }
 
     return () => slots.default?.() ?? props.items?.map(({ children, props: itemProps, raw: item }) => {
+      const loading = isLoading.value === item.value
       const slotsWithItem = {
         prepend: slots.prepend
           ? slotProps => slots.prepend?.({ ...slotProps, item })
@@ -73,7 +77,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
                 key={ item.value }
                 tabindex="-1"
                 modelValue={ isSelected }
-                loading={ isLoading.value }
+                loading={ loading }
                 indeterminate={ isIndeterminate }
                 onClick={ (e: MouseEvent) => onClick(e, item) }
               />
@@ -96,7 +100,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
               <VTreeviewItem
                 { ...itemProps }
                 { ...activatorProps }
-                loading={ isLoading.value }
+                loading={ loading }
                 v-slots={ slotsWithItem }
                 onClick={ (e: MouseEvent | KeyboardEvent) => onClick(e, item) }
               />