fix(layout): use suspense to delay render of layout items

closes #15202

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

@@ -7,6 +7,7 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { useRtl } from '@/composables/rtl'
 
 // Utilities
+import { Suspense } from 'vue'
 import { defineComponent, useRender } from '@/util'
 
 export const VApp = defineComponent({
@@ -34,7 +35,11 @@ export const VApp = defineComponent({
  style={ layoutStyles.value }
  >
  <div class="v-application__wrap">
- { slots.default?.() }
+ <Suspense>
+ <>
+ { slots.default?.() }
+ </>
+ </Suspense>
  </div>
  </div>
  ))

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

@@ -53,12 +53,12 @@ export const VAppBar = defineComponent({
  const vToolbarRef = ref()
  const isActive = useProxiedModel(props, 'modelValue')
  const height = computed(() => {
- const height: number = vToolbarRef.value?.contentHeight ?? 0
+ const height: number = vToolbarRef.value?.contentHeight ?? props.height
  const extensionHeight: number = vToolbarRef.value?.extensionHeight ?? 0
 
  return (height + extensionHeight)
  })
- const { layoutItemStyles } = useLayoutItem({
+ const { layoutItemStyles, layoutIsReady } = useLayoutItem({
  id: props.name,
  order: computed(() => parseInt(props.order, 10)),
  position: toRef(props, 'location'),
@@ -90,7 +90,7 @@ export const VAppBar = defineComponent({
  )
  })
 
- return {}
+ return layoutIsReady
  },
 })
 

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

@@ -67,7 +67,7 @@ export const VBottomNavigation = defineComponent({
  (props.density === 'compact' ? 16 : 0)
  ))
  const isActive = useProxiedModel(props, 'modelValue', props.modelValue)
- const { layoutItemStyles } = useLayoutItem({
+ const { layoutItemStyles, layoutIsReady } = useLayoutItem({
  id: props.name,
  order: computed(() => parseInt(props.order, 10)),
  position: computed(() => 'bottom'),
@@ -123,7 +123,7 @@ export const VBottomNavigation = defineComponent({
  )
  })
 
- return {}
+ return layoutIsReady
  },
 })
 

packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.cy.tsx

@@ -31,4 +31,14 @@ describe('VBottomNavigation', () => {
 
  cy.get('.v-bottom-navigation').should('have.css', 'height', '40px')
  })
+
+ it('should not be visible if modelValue is false', () => {
+ cy.mount(() => (
+ <VLayout>
+ <VBottomNavigation modelValue={false}></VBottomNavigation>
+ </VLayout>
+ ))
+
+ cy.get('.v-bottom-navigation').should('not.be.visible')
+ })
 })

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

@@ -47,7 +47,7 @@ export const VFooter = defineComponent({
  autoHeight.value = entries[0].target.clientHeight
  })
  const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10))
- const { layoutItemStyles } = useLayoutItem({
+ const { layoutItemStyles, layoutIsReady } = useLayoutItem({
  id: props.name,
  order: computed(() => parseInt(props.order, 10)),
  position: computed(() => 'bottom'),
@@ -76,6 +76,6 @@ export const VFooter = defineComponent({
  />
  ))
 
- return {}
+ return props.app ? layoutIsReady : {}
  },
 })

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

@@ -1,12 +1,13 @@
 // Styles
 import './VLayout.sass'
 
-// Utilities
-import { defineComponent, useRender } from '@/util'
-
 // Composables
 import { createLayout, makeLayoutProps } from '@/composables/layout'
 
+// Utilities
+import { Suspense } from 'vue'
+import { defineComponent, useRender } from '@/util'
+
 export const VLayout = defineComponent({
  name: 'VLayout',
 
@@ -17,7 +18,11 @@ export const VLayout = defineComponent({
 
  useRender(() => (
  <div ref={ layoutRef } class={ layoutClasses.value } style={ layoutStyles.value }>
- { slots.default?.() }
+ <Suspense>
+ <>
+ { slots.default?.() }
+ </>
+ </Suspense>
  </div>
  ))
 

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

@@ -15,7 +15,7 @@ export const VMain = defineComponent({
  props: makeTagProps({ tag: 'main' }),
 
  setup (props, { slots }) {
- const { mainStyles } = useLayout()
+ const { mainStyles, layoutIsReady } = useLayout()
  const { ssrBootStyles } = useSsrBoot()
 
  useRender(() => (
@@ -32,6 +32,6 @@ export const VMain = defineComponent({
  </props.tag>
  ))
 
- return {}
+ return layoutIsReady
  },
 })

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

@@ -16,7 +16,7 @@ import { useSsrBoot } from '@/composables/ssrBoot'
 import { useTouch } from './touch'
 
 // Utilities
-import { computed, onBeforeMount, ref, toRef, Transition, watch } from 'vue'
+import { computed, ref, toRef, Transition, watch } from 'vue'
 import { convertToUnit, defineComponent, useRender } from '@/util'
 
 // Types
@@ -96,11 +96,9 @@ export const VNavigationDrawer = defineComponent({
  if (val) isActive.value = true
  })
 
- onBeforeMount(() => {
- if (props.modelValue != null || isTemporary.value) return
-
+ if (props.modelValue == null && !isTemporary.value) {
  isActive.value = props.permanent || !mobile.value
- })
+ }
 
  const rootEl = ref<HTMLElement>()
 
@@ -119,7 +117,7 @@ export const VNavigationDrawer = defineComponent({
 
  return isDragging.value ? size * dragProgress.value : size
  })
- const { layoutItemStyles, layoutRect, layoutItemScrimStyles } = useLayoutItem({
+ const { layoutItemStyles, layoutRect, layoutItemScrimStyles, layoutIsReady } = useLayoutItem({
  id: props.name,
  order: computed(() => parseInt(props.order, 10)),
  position: toRef(props, 'location'),
@@ -219,7 +217,7 @@ export const VNavigationDrawer = defineComponent({
  )
  })
 
- return {}
+ return layoutIsReady
  },
 })
 

packages/vuetify/src/composables/layout.ts

@@ -5,10 +5,10 @@ import { useResizeObserver } from '@/composables/resizeObserver'
 import {
  computed,
  inject,
+ nextTick,
  onActivated,
  onBeforeUnmount,
  onDeactivated,
- onMounted,
  provide,
  reactive,
  ref,
@@ -53,6 +53,7 @@ interface LayoutProvide {
  items: Ref<LayoutItem[]>
  layoutRect: Ref<DOMRectReadOnly | undefined>
  rootZIndex: Ref<number>
+ layoutIsReady: Promise<void>
 }
 
 export const VuetifyLayoutKey: InjectionKey<LayoutProvide> = Symbol.for('vuetify:layout')
@@ -112,6 +113,8 @@ export function useLayoutItem (options: {
  onDeactivated(() => isKeptAlive.value = true)
  onActivated(() => isKeptAlive.value = false)
 
+ const layoutIsReady = nextTick()
+
  const {
  layoutItemStyles,
  layoutItemScrimStyles,
@@ -123,7 +126,7 @@ export function useLayoutItem (options: {
 
  onBeforeUnmount(() => layout.unregister(id))
 
- return { layoutItemStyles, layoutRect: layout.layoutRect, layoutItemScrimStyles }
+ return { layoutItemStyles, layoutRect: layout.layoutRect, layoutItemScrimStyles, layoutIsReady }
 }
 
 const generateLayers = (
@@ -167,27 +170,6 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
  const disabledTransitions = reactive(new Map<string, Ref<boolean>>())
  const { resizeRef, contentRect: layoutRect } = useResizeObserver()
 
- 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 = []
@@ -234,10 +216,7 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
 
  const rootVm = getCurrentInstance('createLayout')
 
- const isMounted = ref(false)
- onMounted(() => {
- isMounted.value = true
- })
+ const layoutIsReady = nextTick()
 
  provide(VuetifyLayoutKey, {
  register: (
@@ -281,19 +260,12 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
  ...(transitionsEnabled.value ? undefined : { transition: 'none' }),
  } as const
 
- if (!isMounted.value) return styles
-
  if (index.value < 0) throw new Error(`Layout item "${id}" is missing`)
 
  const item = items.value[index.value]
 
  if (!item) throw new Error(`Could not find layout item "${id}`)
 
- const overlap = computedOverlaps.value.get(id)
- if (overlap) {
- item[overlap.position] += overlap.amount
- }
-
  return {
  ...styles,
  height: isHorizontal ? `calc(100% - ${item.top}px - ${item.bottom}px)` : elementSize.value ? `${elementSize.value}px` : undefined,
@@ -325,6 +297,7 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
  items,
  layoutRect,
  rootZIndex,
+ layoutIsReady,
  })
 
  const layoutClasses = computed(() => [
@@ -342,6 +315,7 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
  getLayoutItem,
  items,
  layoutRect,
+ layoutIsReady,
  layoutRef: resizeRef,
  }
 }