Revert "fix(layout): use suspense to delay render of layout items (#1…

…5229)"

This reverts commit 727bc1a.

fixes #19800

packages/vuetify/src/components/VApp/VApp.tsx

@@ -8,7 +8,6 @@ import { useRtl } from '@/composables/locale'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
-import { Suspense } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 export const makeVAppProps = propsFactory({
@@ -42,11 +41,7 @@ export const VApp = genericComponent()({
         ]}
       >
         <div class="v-application__wrap">
-          <Suspense>
-            <>
-              { slots.default?.() }
-            </>
-          </Suspense>
+          { slots.default?.() }
         </div>
       </div>
     ))

packages/vuetify/src/components/VAppBar/VAppBar.tsx

@@ -106,8 +106,10 @@ export const VAppBar = genericComponent<VToolbarSlots>()({
         : undefined
     ))
     const height = computed(() => {
-      const height = Number(vToolbarRef.value?.contentHeight ?? props.height)
-      const extensionHeight = Number(vToolbarRef.value?.extensionHeight ?? 0)
+      if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0
+
+      const height = vToolbarRef.value?.contentHeight ?? 0
+      const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0
 
       if (!canHide.value) return (height + extensionHeight)
 
@@ -131,7 +133,7 @@ export const VAppBar = genericComponent<VToolbarSlots>()({
     })
 
     const { ssrBootStyles } = useSsrBoot()
-    const { layoutItemStyles, layoutIsReady } = useLayoutItem({
+    const { layoutItemStyles } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
       position: toRef(props, 'location'),
@@ -171,7 +173,7 @@ export const VAppBar = genericComponent<VToolbarSlots>()({
       )
     })
 
-    return layoutIsReady
+    return {}
   },
 })
 

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

@@ -85,7 +85,7 @@ export const VBottomNavigation = genericComponent<new <T>(
       (props.density === 'compact' ? 16 : 0)
     ))
     const isActive = useProxiedModel(props, 'active', props.active)
-    const { layoutItemStyles, layoutIsReady } = useLayoutItem({
+    const { layoutItemStyles } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
       position: computed(() => 'bottom'),
@@ -144,7 +144,7 @@ export const VBottomNavigation = genericComponent<new <T>(
       )
     })
 
-    return layoutIsReady
+    return {}
   },
 })
 

packages/vuetify/src/components/VFooter/VFooter.tsx

@@ -41,7 +41,6 @@ export const VFooter = genericComponent()({
 
   setup (props, { slots }) {
     const layoutItemStyles = ref()
-    const layoutIsReady = shallowRef()
 
     const { themeClasses } = provideTheme(props)
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))
@@ -69,7 +68,6 @@ export const VFooter = genericComponent()({
 
       watchEffect(() => {
         layoutItemStyles.value = layout.layoutItemStyles.value
-        layoutIsReady.value = layout.layoutIsReady
       })
     })
 
@@ -96,7 +94,7 @@ export const VFooter = genericComponent()({
       />
     ))
 
-    return props.app ? layoutIsReady.value : {}
+    return {}
   },
 })
 

packages/vuetify/src/components/VLayout/VLayout.tsx

@@ -7,7 +7,6 @@ import { makeDimensionProps, useDimension } from '@/composables/dimensions'
 import { createLayout, makeLayoutProps } from '@/composables/layout'
 
 // Utilities
-import { Suspense } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 export const makeVLayoutProps = propsFactory({
@@ -38,11 +37,7 @@ export const VLayout = genericComponent()({
           props.style,
         ]}
       >
-        <Suspense>
-          <>
-            { slots.default?.() }
-          </>
-        </Suspense>
+        { slots.default?.() }
       </div>
     ))
 

packages/vuetify/src/components/VLayout/VLayoutItem.tsx

@@ -7,7 +7,7 @@ import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'
 
 // Utilities
 import { computed, toRef } from 'vue'
-import { genericComponent, propsFactory, useRender } from '@/util'
+import { genericComponent, propsFactory } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -33,7 +33,7 @@ export const VLayoutItem = genericComponent()({
   props: makeVLayoutItemProps(),
 
   setup (props, { slots }) {
-    const { layoutItemStyles, layoutIsReady } = useLayoutItem({
+    const { layoutItemStyles } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
       position: toRef(props, 'position'),
@@ -43,7 +43,7 @@ export const VLayoutItem = genericComponent()({
       absolute: toRef(props, 'absolute'),
     })
 
-    useRender(() => (
+    return () => (
       <div
         class={[
           'v-layout-item',
@@ -56,9 +56,7 @@ export const VLayoutItem = genericComponent()({
       >
         { slots.default?.() }
       </div>
-    ))
-
-    return layoutIsReady
+    )
   },
 })
 

packages/vuetify/src/components/VMain/VMain.tsx

@@ -26,7 +26,7 @@ export const VMain = genericComponent()({
 
   setup (props, { slots }) {
     const { dimensionStyles } = useDimension(props)
-    const { mainStyles, layoutIsReady } = useLayout()
+    const { mainStyles } = useLayout()
     const { ssrBootStyles } = useSsrBoot()
 
     useRender(() => (
@@ -54,7 +54,7 @@ export const VMain = genericComponent()({
       </props.tag>
     ))
 
-    return layoutIsReady
+    return {}
   },
 })
 

packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx

@@ -178,7 +178,7 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
       return isDragging.value ? size * dragProgress.value : size
     })
     const elementSize = computed(() => ['top', 'bottom'].includes(props.location) ? 0 : width.value)
-    const { layoutItemStyles, layoutItemScrimStyles, layoutIsReady } = useLayoutItem({
+    const { layoutItemStyles, layoutItemScrimStyles } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
       position: location,
@@ -314,7 +314,9 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
       )
     })
 
-    return layoutIsReady.then(() => ({ isStuck }))
+    return {
+      isStuck,
+    }
   },
 })
 

packages/vuetify/src/composables/layout.ts

@@ -5,16 +5,16 @@ import { useResizeObserver } from '@/composables/resizeObserver'
 import {
   computed,
   inject,
-  nextTick,
   onActivated,
   onBeforeUnmount,
   onDeactivated,
+  onMounted,
   provide,
   reactive,
   ref,
   shallowRef,
 } from 'vue'
-import { convertToUnit, eagerComputed, findChildrenWithProvide, getCurrentInstance, getUid, propsFactory } from '@/util'
+import { convertToUnit, findChildrenWithProvide, getCurrentInstance, getUid, propsFactory } from '@/util'
 
 // Types
 import type { ComponentInternalInstance, CSSProperties, InjectionKey, Prop, Ref } from 'vue'
@@ -59,7 +59,6 @@ interface LayoutProvide {
   items: Ref<LayoutItem[]>
   layoutRect: Ref<DOMRectReadOnly | undefined>
   rootZIndex: Ref<number>
-  layoutIsReady: Promise<void>
 }
 
 export const VuetifyLayoutKey: InjectionKey<LayoutProvide> = Symbol.for('vuetify:layout')
@@ -92,10 +91,7 @@ export function useLayout () {
 
   if (!layout) throw new Error('[Vuetify] Could not find injected layout')
 
-  const layoutIsReady = nextTick()
-
   return {
-    layoutIsReady,
     getLayoutItem: layout.getLayoutItem,
     mainRect: layout.mainRect,
     mainStyles: layout.mainStyles,
@@ -126,8 +122,6 @@ export function useLayoutItem (options: {
   onDeactivated(() => isKeptAlive.value = true)
   onActivated(() => isKeptAlive.value = false)
 
-  const layoutIsReady = nextTick()
-
   const {
     layoutItemStyles,
     layoutItemScrimStyles,
@@ -139,7 +133,7 @@ export function useLayoutItem (options: {
 
   onBeforeUnmount(() => layout.unregister(id))
 
-  return { layoutItemStyles, layoutRect: layout.layoutRect, layoutItemScrimStyles, layoutIsReady }
+  return { layoutItemStyles, layoutRect: layout.layoutRect, layoutItemScrimStyles }
 }
 
 const generateLayers = (
@@ -183,7 +177,28 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
   const disabledTransitions = reactive(new Map<string, Ref<boolean>>())
   const { resizeRef, contentRect: layoutRect } = useResizeObserver()
 
-  const layers = eagerComputed(() => {
+  const computedOverlaps = computed(() => {
+    const map = new Map<string, { position: Position, amount: number }>()
+    const overlaps = props.overlaps ?? []
+    for (const overlap of overlaps.filter(item => item.includes(':'))) {
+      const [top, bottom] = overlap.split(':')
+      if (!registered.value.includes(top) || !registered.value.includes(bottom)) continue
+
+      const topPosition = positions.get(top)
+      const bottomPosition = positions.get(bottom)
+      const topAmount = layoutSizes.get(top)
+      const bottomAmount = layoutSizes.get(bottom)
+
+      if (!topPosition || !bottomPosition || !topAmount || !bottomAmount) continue
+
+      map.set(bottom, { position: topPosition.value, amount: parseInt(topAmount.value, 10) })
+      map.set(top, { position: bottomPosition.value, amount: -parseInt(bottomAmount.value, 10) })
+    }
+
+    return map
+  })
+
+  const layers = computed(() => {
     const uniquePriorities = [...new Set([...priorities.values()].map(p => p.value))].sort((a, b) => a - b)
     const layout = []
     for (const p of uniquePriorities) {
@@ -211,7 +226,7 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
     }
   })
 
-  const items = eagerComputed(() => {
+  const items = computed(() => {
     return layers.value.slice(1).map(({ id }, index) => {
       const { layer } = layers.value[index]
       const size = layoutSizes.get(id)
@@ -232,7 +247,10 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
 
   const rootVm = getCurrentInstance('createLayout')
 
-  const layoutIsReady = nextTick()
+  const isMounted = shallowRef(false)
+  onMounted(() => {
+    isMounted.value = true
+  })
 
   provide(VuetifyLayoutKey, {
     register: (
@@ -278,12 +296,17 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
           ...(transitionsEnabled.value ? undefined : { transition: 'none' }),
         } as const
 
-        if (index.value < 0) throw new Error(`Layout item "${id}" is missing`)
+        if (!isMounted.value) return styles
 
         const item = items.value[index.value]
 
         if (!item) throw new Error(`[Vuetify] Could not find layout item "${id}"`)
 
+        const overlap = computedOverlaps.value.get(id)
+        if (overlap) {
+          item[overlap.position] += overlap.amount
+        }
+
         return {
           ...styles,
           height:
@@ -321,7 +344,6 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
     items,
     layoutRect,
     rootZIndex,
-    layoutIsReady,
   })
 
   const layoutClasses = computed(() => [
@@ -341,7 +363,6 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
     getLayoutItem,
     items,
     layoutRect,
-    layoutIsReady,
     layoutRef: resizeRef,
   }
 }