fix(groups): use suspense to delay rendering of group items

packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx

@@ -20,7 +20,7 @@ import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, useTheme } from '@/composables/theme'
 
 // Utilities
-import { computed, toRef } from 'vue'
+import { computed, Suspense, toRef } from 'vue'
 import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
@@ -95,7 +95,7 @@ export const VBottomNavigation = genericComponent<new <T>(
       absolute: toRef(props, 'absolute'),
     })
 
-    useGroup(props, VBtnToggleSymbol)
+    const group = useGroup(props, VBtnToggleSymbol)
 
     provideDefaults({
       VBtn: {
@@ -135,11 +135,13 @@ export const VBottomNavigation = genericComponent<new <T>(
             props.style,
           ]}
         >
-          { slots.default && (
-            <div class="v-bottom-navigation__content">
-              { slots.default() }
-            </div>
-          )}
+          <div class="v-bottom-navigation__content">
+            <Suspense onResolve={ group.ready }>
+              <>
+                { slots.default?.() }
+              </>
+            </Suspense>
+          </div>
         </props.tag>
       )
     })

packages/vuetify/src/components/VBtn/VBtn.tsx

@@ -303,7 +303,9 @@ export const VBtn = genericComponent<VBtnSlots>()({
       )
     })
 
-    return { group }
+    const expose = { group }
+
+    return group ? group.isReady.then(() => expose) : expose
   },
 })
 

packages/vuetify/src/components/VBtnToggle/VBtnToggle.tsx

@@ -8,6 +8,7 @@ import { makeVBtnGroupProps, VBtnGroup } from '@/components/VBtnGroup/VBtnGroup'
 import { makeGroupProps, useGroup } from '@/composables/group'
 
 // Utilities
+import { Suspense } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
@@ -45,7 +46,7 @@ export const VBtnToggle = genericComponent<new <T>(
   },
 
   setup (props, { slots }) {
-    const { isSelected, next, prev, select, selected } = useGroup(props, VBtnToggleSymbol)
+    const { isSelected, next, prev, select, selected, ready } = useGroup(props, VBtnToggleSymbol)
 
     useRender(() => {
       const btnGroupProps = VBtnGroup.filterProps(props)
@@ -59,13 +60,17 @@ export const VBtnToggle = genericComponent<new <T>(
           { ...btnGroupProps }
           style={ props.style }
         >
-          { slots.default?.({
-            isSelected,
-            next,
-            prev,
-            select,
-            selected,
-          })}
+          <Suspense onResolve={ ready }>
+            <>
+              { slots.default?.({
+                isSelected,
+                next,
+                prev,
+                select,
+                selected,
+              })}
+            </>
+          </Suspense>
         </VBtnGroup>
       )
     })

packages/vuetify/src/components/VChip/VChip.tsx

@@ -30,7 +30,7 @@ import { Ripple } from '@/directives/ripple'
 
 // Utilities
 import { computed } from 'vue'
-import { EventProp, genericComponent, propsFactory } from '@/util'
+import { EventProp, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -166,7 +166,7 @@ export const VChip = genericComponent<VChipSlots>()({
       }
     }
 
-    return () => {
+    useRender(() => {
       const Tag = (link.isLink.value) ? 'a' : props.tag
       const hasAppendMedia = !!(props.appendIcon || props.appendAvatar)
       const hasAppend = !!(hasAppendMedia || slots.append)
@@ -357,7 +357,9 @@ export const VChip = genericComponent<VChipSlots>()({
           )}
         </Tag>
       )
-    }
+    })
+
+    return group ? group.isReady : undefined
   },
 })
 

packages/vuetify/src/components/VChipGroup/VChipGroup.tsx

@@ -13,7 +13,7 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { makeVariantProps } from '@/composables/variant'
 
 // Utilities
-import { toRef } from 'vue'
+import { Suspense, toRef } from 'vue'
 import { deepEqual, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
@@ -65,7 +65,7 @@ export const VChipGroup = genericComponent<new <T>(
 
   setup (props, { slots }) {
     const { themeClasses } = provideTheme(props)
-    const { isSelected, select, next, prev, selected } = useGroup(props, VChipGroupSymbol)
+    const { isSelected, select, next, prev, selected, ready } = useGroup(props, VChipGroupSymbol)
 
     provideDefaults({
       VChip: {
@@ -92,13 +92,17 @@ export const VChipGroup = genericComponent<new <T>(
           ]}
           style={ props.style }
         >
-          { slots.default?.({
-            isSelected,
-            select,
-            next,
-            prev,
-            selected: selected.value,
-          })}
+          <Suspense onResolve={ ready }>
+            <>
+              { slots.default?.({
+                isSelected,
+                select,
+                next,
+                prev,
+                selected: selected.value,
+              })}
+            </>
+          </Suspense>
         </VSlideGroup>
       )
     })

packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx

@@ -124,7 +124,7 @@ export const VExpansionPanel = genericComponent<VExpansionPanelSlots>()({
       )
     })
 
-    return {}
+    return groupItem.isReady
   },
 })
 

packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx

@@ -10,7 +10,7 @@ import { makeGroupProps, useGroup } from '@/composables/group'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
-import { computed, toRef } from 'vue'
+import { computed, Suspense, toRef } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
@@ -47,7 +47,7 @@ export const VExpansionPanels = genericComponent()({
   },
 
   setup (props, { slots }) {
-    useGroup(props, VExpansionPanelSymbol)
+    const group = useGroup(props, VExpansionPanelSymbol)
 
     const { themeClasses } = provideTheme(props)
 
@@ -83,8 +83,13 @@ export const VExpansionPanels = genericComponent()({
           props.class,
         ]}
         style={ props.style }
-        v-slots={ slots }
-      />
+      >
+        <Suspense onResolve={ group.ready }>
+          <>
+            { slots.default?.() }
+          </>
+        </Suspense>
+      </props.tag>
     ))
 
     return {}

packages/vuetify/src/components/VItemGroup/VItem.tsx

@@ -3,7 +3,7 @@ import { VItemGroupSymbol } from './VItemGroup'
 import { makeGroupItemProps, useGroupItem } from '@/composables/group'
 
 // Utilities
-import { genericComponent } from '@/util'
+import { genericComponent, useRender } from '@/util'
 
 type VItemSlots = {
   default: {
@@ -26,15 +26,18 @@ export const VItem = genericComponent<VItemSlots>()({
   },
 
   setup (props, { slots }) {
-    const { isSelected, select, toggle, selectedClass, value, disabled } = useGroupItem(props, VItemGroupSymbol)
-    return () => slots.default?.({
+    const { isSelected, isReady, select, toggle, selectedClass, value, disabled } = useGroupItem(props, VItemGroupSymbol)
+
+    useRender(() => slots.default?.({
       isSelected: isSelected.value,
       selectedClass: selectedClass.value,
       select,
       toggle,
       value: value.value,
       disabled: disabled.value,
-    })
+    }))
+
+    return isReady
   },
 })
 

packages/vuetify/src/components/VItemGroup/VItemGroup.tsx

@@ -8,6 +8,7 @@ import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
+import { Suspense } from 'vue'
 import { genericComponent, propsFactory } from '@/util'
 
 // Types
@@ -51,7 +52,7 @@ export const VItemGroup = genericComponent<new <T>(
 
   setup (props, { slots }) {
     const { themeClasses } = provideTheme(props)
-    const { isSelected, select, next, prev, selected } = useGroup(props, VItemGroupSymbol)
+    const { isSelected, select, next, prev, selected, ready } = useGroup(props, VItemGroupSymbol)
 
     return () => (
       <props.tag
@@ -62,13 +63,17 @@ export const VItemGroup = genericComponent<new <T>(
         ]}
         style={ props.style }
       >
-        { slots.default?.({
-          isSelected,
-          select,
-          next,
-          prev,
-          selected: selected.value,
-        })}
+        <Suspense onResolve={ ready }>
+          <>
+            { slots.default?.({
+              isSelected,
+              select,
+              next,
+              prev,
+              selected: selected.value,
+            })}
+          </>
+        </Suspense>
       </props.tag>
     )
   },

packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.ts

@@ -5,7 +5,7 @@ import { VItemGroup } from '../VItemGroup'
 // Utilities
 import { describe, expect, it } from '@jest/globals'
 import { mount } from '@vue/test-utils'
-import { h } from 'vue'
+import { h, nextTick } from 'vue'
 import { createVuetify } from '@/framework'
 
 describe('VItemGroup', () => {
@@ -35,6 +35,8 @@ describe('VItemGroup', () => {
       },
     })
 
+    await nextTick()
+
     const items = wrapper.findAll('#item')
 
     await items[0].trigger('click')
@@ -56,6 +58,9 @@ describe('VItemGroup', () => {
       },
     })
 
+    await nextTick()
+    await nextTick()
+
     const items = wrapper.findAll('#item')
 
     await items[0].trigger('click')
@@ -76,6 +81,9 @@ describe('VItemGroup', () => {
       },
     })
 
+    await nextTick()
+    await nextTick()
+
     const items = wrapper.findAll('#item')
 
     await items[0].trigger('click')
@@ -106,6 +114,8 @@ describe('VItemGroup', () => {
       },
     })
 
+    await nextTick()
+
     const items = wrapper.findAll('#item')
 
     await items[0].trigger('click')

packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx

@@ -15,7 +15,7 @@ import { useResizeObserver } from '@/composables/resizeObserver'
 import { makeTagProps } from '@/composables/tag'
 
 // Utilities
-import { computed, shallowRef, watch } from 'vue'
+import { computed, shallowRef, Suspense, watch } from 'vue'
 import { bias, calculateCenteredOffset, calculateUpdatedOffset } from './helpers'
 import { clamp, focusableChildren, genericComponent, IN_BROWSER, propsFactory, useRender } from '@/util'
 
@@ -398,7 +398,11 @@ export const VSlideGroup = genericComponent<new <T>(
             onFocusout={ onFocusout }
             onKeydown={ onKeydown }
           >
-            { slots.default?.(slotProps.value) }
+            <Suspense onResolve={ group.ready }>
+              <>
+                { slots.default?.(slotProps.value) }
+              </>
+            </Suspense>
           </div>
         </div>
 

packages/vuetify/src/components/VSlideGroup/VSlideGroupItem.tsx

@@ -3,7 +3,7 @@ import { makeGroupItemProps, useGroupItem } from '@/composables/group'
 
 // Utilities
 import { VSlideGroupSymbol } from './VSlideGroup'
-import { genericComponent } from '@/util'
+import { genericComponent, useRender } from '@/util'
 
 // Types
 import type { UnwrapRef } from 'vue'
@@ -30,12 +30,14 @@ export const VSlideGroupItem = genericComponent<VSlideGroupItemSlots>()({
   setup (props, { slots }) {
     const slideGroupItem = useGroupItem(props, VSlideGroupSymbol)
 
-    return () => slots.default?.({
+    useRender(() => slots.default?.({
       isSelected: slideGroupItem.isSelected.value,
       select: slideGroupItem.select,
       toggle: slideGroupItem.toggle,
       selectedClass: slideGroupItem.selectedClass.value,
-    })
+    }))
+
+    return slideGroupItem.isReady
   },
 })
 

packages/vuetify/src/components/VWindow/VWindow.tsx

@@ -15,7 +15,7 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { Touch } from '@/directives/touch'
 
 // Utilities
-import { computed, provide, ref, shallowRef, watch } from 'vue'
+import { computed, provide, ref, shallowRef, Suspense, watch } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
@@ -243,7 +243,11 @@ export const VWindow = genericComponent<new <T>(
             height: transitionHeight.value,
           }}
         >
-          { slots.default?.({ group }) }
+          <Suspense onResolve={ group.ready }>
+            <>
+              { slots.default?.({ group }) }
+            </>
+          </Suspense>
 
           { props.showArrows !== false && (
             <div class="v-window__controls">