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

closes #15202

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

@@ -8,6 +8,7 @@ import { createLayout, makeLayoutProps } from '@/composables/layout'
 // Utilities
 import { defineComponent, useRender } from '@/util'
 import { useRtl } from '@/composables/rtl'
+import { Suspense } from 'vue'
 
 export const VApp = defineComponent({
  name: 'VApp',
@@ -35,7 +36,11 @@ export const VApp = defineComponent({
  data-app="true"
  >
  <div class="v-application__wrap">
- { slots.default?.() }
+ <Suspense>
+ <>
+ { slots.default?.() }
+ </>
+ </Suspense>
  </div>
  </div>
  ))

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

@@ -10,7 +10,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { computed, ref, toRef } from 'vue'
-import { defineComponent } from '@/util'
+import { defineComponent, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -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'),
@@ -68,7 +68,7 @@ export const VAppBar = defineComponent({
  absolute: toRef(props, 'absolute'),
  })
 
- return () => {
+ useRender(() => {
  const [toolbarProps] = filterToolbarProps(props)
 
  return (
@@ -88,7 +88,9 @@ export const VAppBar = defineComponent({
  v-slots={ slots }
  />
  )
- }
+ })
+
+ return layoutIsReady
  },
 })
 

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

@@ -16,7 +16,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { computed, toRef } from 'vue'
-import { convertToUnit, defineComponent } from '@/util'
+import { convertToUnit, defineComponent, useRender } from '@/util'
 
 // Types
 import { VBtnToggleSymbol } from '../VBtnToggle/VBtnToggle'
@@ -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'),
@@ -88,7 +88,7 @@ export const VBottomNavigation = defineComponent({
  },
  }, { scoped: true })
 
- return () => {
+ useRender(() => {
  return (
  <props.tag
  class={[
@@ -121,7 +121,9 @@ export const VBottomNavigation = defineComponent({
  ) }
  </props.tag>
  )
- }
+ })
+
+ return layoutIsReady
  },
 })
 

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

@@ -0,0 +1,16 @@
+/// <reference types="../../../../types/cypress" />
+
+import { VLayout } from '@/components/VLayout'
+import { VBottomNavigation } from '../VBottomNavigation'
+
+describe('VBottomNavigation', () => {
+ 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

@@ -13,7 +13,7 @@ import { useResizeObserver } from '@/composables/resizeObserver'
 
 // Utilities
 import { computed, ref, toRef } from 'vue'
-import { defineComponent } from '@/util'
+import { defineComponent, useRender } from '@/util'
 
 export const VFooter = defineComponent({
  name: 'VFooter',
@@ -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'),
@@ -57,7 +57,7 @@ export const VFooter = defineComponent({
  absolute: toRef(props, 'absolute'),
  })
 
- return () => (
+ useRender(() => (
  <props.tag
  ref={ resizeRef }
  class={[
@@ -74,6 +74,8 @@ export const VFooter = defineComponent({
  ]}
  v-slots={ slots }
  />
- )
+ ))
+
+ 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

@@ -7,18 +7,18 @@ import { useLayout } from '@/composables/layout'
 import { useSsrBoot } from '@/composables/ssrBoot'
 
 // Utilities
-import { defineComponent } from '@/util'
+import { defineComponent, useRender } from '@/util'
 
 export const VMain = defineComponent({
  name: 'VMain',
 
  props: makeTagProps({ tag: 'main' }),
 
  setup (props, { slots }) {
- const { mainStyles } = useLayout()
+ const { mainStyles, layoutIsReady } = useLayout()
  const { ssrBootStyles } = useSsrBoot()
 
- return () => (
+ useRender(() => (
  <props.tag
  class="v-main"
  style={[
@@ -30,6 +30,8 @@ export const VMain = defineComponent({
  { slots.default?.() }
  </div>
  </props.tag>
- )
+ ))
+
+ return layoutIsReady
  },
 })

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

@@ -16,8 +16,8 @@ import { useSsrBoot } from '@/composables/ssrBoot'
 import { useTouch } from './touch'
 
 // Utilities
-import { computed, onBeforeMount, ref, toRef, Transition, watch } from 'vue'
-import { convertToUnit, defineComponent } from '@/util'
+import { computed, ref, toRef, Transition, watch } from 'vue'
+import { convertToUnit, defineComponent, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -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'),
@@ -144,7 +142,7 @@ export const VNavigationDrawer = defineComponent({
  ...layoutItemScrimStyles.value,
  }))
 
- return () => {
+ useRender(() => {
  const hasImage = (slots.image || props.image)
 
  return (
@@ -217,7 +215,9 @@ export const VNavigationDrawer = defineComponent({
  </Transition>
  </>
  )
- }
+ })
+
+ return layoutIsReady
  },
 })