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

Co-authored-by: John Leider <john.j.leider@gmail.com> Co-authored-by: John Leider <john@vuetifyjs.com> Co-authored-by: Kael <kaelwd@gmail.com>
vuetifyjs · Feb 14, 2024 · 804f927 · 804f927
1 parent 92560a6
commit 804f927
Show file tree

Hide file tree

Showing 11 changed files with 75 additions and 66 deletions.
diff --git a/packages/vuetify/src/components/VApp/VApp.tsx b/packages/vuetify/src/components/VApp/VApp.tsx
@@ -8,6 +8,7 @@ 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({
@@ -41,7 +42,11 @@ export const VApp = genericComponent()({
  ]}
  >
  <div class="v-application__wrap">
- { slots.default?.() }
+ <Suspense>
+ <>
+ { slots.default?.() }
+ </>
+ </Suspense>
  </div>
  </div>
  ))

diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.tsx b/packages/vuetify/src/components/VAppBar/VAppBar.tsx
@@ -99,10 +99,8 @@ export const VAppBar = genericComponent<VToolbarSlots>()({
  : undefined
  ))
  const height = computed(() => {
- if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0
-
- const height = vToolbarRef.value?.contentHeight ?? 0
- const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0
+ const height = Number(vToolbarRef.value?.contentHeight ?? props.height)
+ const extensionHeight = Number(vToolbarRef.value?.extensionHeight ?? 0)
 
  return (height + extensionHeight)
  })
@@ -122,7 +120,7 @@ export const VAppBar = genericComponent<VToolbarSlots>()({
  })
 
  const { ssrBootStyles } = useSsrBoot()
- const { layoutItemStyles } = useLayoutItem({
+ const { layoutItemStyles, layoutIsReady } = useLayoutItem({
  id: props.name,
  order: computed(() => parseInt(props.order, 10)),
  position: toRef(props, 'location'),
@@ -162,7 +160,7 @@ export const VAppBar = genericComponent<VToolbarSlots>()({
  )
  })
 
- return {}
+ return layoutIsReady
  },
 })
 

diff --git a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx
@@ -13,6 +13,7 @@ import { makeDensityProps, useDensity } from '@/composables/density'
 import { makeElevationProps, useElevation } from '@/composables/elevation'
 import { makeGroupProps, useGroup } from '@/composables/group'
 import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'
+import { useProxiedModel } from '@/composables/proxiedModel'
 import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { useSsrBoot } from '@/composables/ssrBoot'
 import { makeTagProps } from '@/composables/tag'
@@ -84,8 +85,8 @@ export const VBottomNavigation = genericComponent<new <T>(
  (props.density === 'comfortable' ? 8 : 0) -
  (props.density === 'compact' ? 16 : 0)
  ))
- const isActive = toRef(props, 'active')
- const { layoutItemStyles } = useLayoutItem({
+ const isActive = useProxiedModel(props, 'modelValue', props.modelValue)
+ const { layoutItemStyles, layoutIsReady } = useLayoutItem({
  id: props.name,
  order: computed(() => parseInt(props.order, 10)),
  position: computed(() => 'bottom'),
@@ -144,7 +145,7 @@ export const VBottomNavigation = genericComponent<new <T>(
  )
  })
 
- return {}
+ return layoutIsReady
  },
 })
 

diff --git a/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.cy.tsx b/packages/vuetify/src/components/VBottomNavigation/__tests__/VBottomNavigation.spec.cy.tsx
@@ -28,4 +28,14 @@ describe('VBottomNavigation', () => {
  .setProps({ density: 'compact' })
  .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')
+ })
 })
diff --git a/packages/vuetify/src/components/VFooter/VFooter.tsx b/packages/vuetify/src/components/VFooter/VFooter.tsx
@@ -51,7 +51,7 @@ export const VFooter = genericComponent()({
  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'),
@@ -84,7 +84,7 @@ export const VFooter = genericComponent()({
  />
  ))
 
- return {}
+ return props.app ? layoutIsReady : {}
  },
 })
 

diff --git a/packages/vuetify/src/components/VLayout/VLayout.tsx b/packages/vuetify/src/components/VLayout/VLayout.tsx
@@ -6,6 +6,7 @@ import { makeComponentProps } from '@/composables/component'
 import { createLayout, makeLayoutProps } from '@/composables/layout'
 
 // Utilities
+import { Suspense } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 export const makeVLayoutProps = propsFactory({
@@ -33,7 +34,11 @@ export const VLayout = genericComponent()({
  props.style,
  ]}
  >
- { slots.default?.() }
+ <Suspense>
+ <>
+ { slots.default?.() }
+ </>
+ </Suspense>
  </div>
  ))
 

diff --git a/packages/vuetify/src/components/VLayout/VLayoutItem.tsx b/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 } from '@/util'
+import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -33,7 +33,7 @@ export const VLayoutItem = genericComponent()({
  props: makeVLayoutItemProps(),
 
  setup (props, { slots }) {
- const { layoutItemStyles } = useLayoutItem({
+ const { layoutItemStyles, layoutIsReady } = 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'),
  })
 
- return () => (
+ useRender(() => (
  <div
  class={[
  'v-layout-item',
@@ -56,7 +56,9 @@ export const VLayoutItem = genericComponent()({
  >
  { slots.default?.() }
  </div>
- )
+ ))
+
+ return layoutIsReady
  },
 })
 

diff --git a/packages/vuetify/src/components/VMain/VMain.tsx b/packages/vuetify/src/components/VMain/VMain.tsx
@@ -23,7 +23,7 @@ export const VMain = genericComponent()({
  props: makeVMainProps(),
 
  setup (props, { slots }) {
- const { mainStyles } = useLayout()
+ const { mainStyles, layoutIsReady } = useLayout()
  const { ssrBootStyles } = useSsrBoot()
 
  useRender(() => (
@@ -50,7 +50,7 @@ export const VMain = genericComponent()({
  </props.tag>
  ))
 
- return {}
+ return layoutIsReady
  },
 })
 

diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
@@ -22,7 +22,7 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 import { useToggleScope } from '@/composables/toggleScope'
 
 // Utilities
-import { computed, nextTick, onBeforeMount, ref, shallowRef, toRef, Transition, watch } from 'vue'
+import { computed, nextTick, ref, shallowRef, toRef, Transition, watch } from 'vue'
 import { genericComponent, propsFactory, toPhysical, useRender } from '@/util'
 
 // Types
@@ -145,11 +145,9 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
  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 { isDragging, dragProgress, dragStyles } = useTouch({
  isActive,
@@ -166,8 +164,7 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
 
  return isDragging.value ? size * dragProgress.value : size
  })
-
- const { layoutItemStyles, layoutItemScrimStyles } = useLayoutItem({
+ const { layoutItemStyles, layoutItemScrimStyles, layoutIsReady } = useLayoutItem({
  id: props.name,
  order: computed(() => parseInt(props.order, 10)),
  position: location,
@@ -287,9 +284,7 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
  )
  })
 
- return {
- isStuck,
- }
+ return layoutIsReady.then(() => ({ isStuck }))
  },
 })
 

diff --git a/packages/vuetify/src/composables/layout.ts b/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, findChildrenWithProvide, getCurrentInstance, getUid, propsFactory } from '@/util'
+import { convertToUnit, eagerComputed, findChildrenWithProvide, getCurrentInstance, getUid, propsFactory } from '@/util'
 
 // Types
 import type { ComponentInternalInstance, CSSProperties, InjectionKey, Prop, Ref } from 'vue'
@@ -59,6 +59,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')
@@ -91,7 +92,10 @@ 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,
@@ -122,6 +126,8 @@ export function useLayoutItem (options: {
  onDeactivated(() => isKeptAlive.value = true)
  onActivated(() => isKeptAlive.value = false)
 
+ const layoutIsReady = nextTick()
+
  const {
  layoutItemStyles,
  layoutItemScrimStyles,
@@ -133,7 +139,7 @@ export function useLayoutItem (options: {
 
  onBeforeUnmount(() => layout.unregister(id))
 
- return { layoutItemStyles, layoutRect: layout.layoutRect, layoutItemScrimStyles }
+ return { layoutItemStyles, layoutRect: layout.layoutRect, layoutItemScrimStyles, layoutIsReady }
 }
 
 const generateLayers = (
@@ -177,28 +183,7 @@ 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 layers = eagerComputed(() => {
  const uniquePriorities = [...new Set([...priorities.values()].map(p => p.value))].sort((a, b) => a - b)
  const layout = []
  for (const p of uniquePriorities) {
@@ -226,7 +211,7 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
  }
  })
 
- const items = computed(() => {
+ const items = eagerComputed(() => {
  return layers.value.slice(1).map(({ id }, index) => {
  const { layer } = layers.value[index]
  const size = layoutSizes.get(id)
@@ -247,10 +232,7 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
 
  const rootVm = getCurrentInstance('createLayout')
 
- const isMounted = shallowRef(false)
- onMounted(() => {
- isMounted.value = true
- })
+ const layoutIsReady = nextTick()
 
  provide(VuetifyLayoutKey, {
  register: (
@@ -294,17 +276,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(`[Vuetify] Could not find layout item "${id}"`)
 
- const overlap = computedOverlaps.value.get(id)
- if (overlap) {
- item[overlap.position] += overlap.amount
- }
-
  return {
  ...styles,
  height:
@@ -342,6 +319,7 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
  items,
  layoutRect,
  rootZIndex,
+ layoutIsReady,
  })
 
  const layoutClasses = computed(() => [
@@ -361,6 +339,7 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
  getLayoutItem,
  items,
  layoutRect,
+ layoutIsReady,
  layoutRef: resizeRef,
  }
 }