fix(VTreeview): scoped loading state by child (#19773)

fixes #19390
vuetifyjs · May 14, 2024 · 49892e2 · 49892e2
1 parent 74158a8
commit 49892e2
Showing 1 changed file with 15 additions and 11 deletions.
diff --git 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) }
               />