Skip to content

Commit

Permalink
Revert "fix(layout): use suspense to delay render of layout items (#1…
Browse files Browse the repository at this point in the history
…5229)"

This reverts commit 727bc1a.

fixes #19800
  • Loading branch information
KaelWD committed Aug 15, 2024
1 parent 4d82129 commit 08c3d4f
Show file tree
Hide file tree
Showing 9 changed files with 57 additions and 46 deletions.
7 changes: 1 addition & 6 deletions packages/vuetify/src/components/VApp/VApp.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -42,11 +41,7 @@ export const VApp = genericComponent()({
]}
>
<div class="v-application__wrap">
<Suspense>
<>
{ slots.default?.() }
</>
</Suspense>
{ slots.default?.() }
</div>
</div>
))
Expand Down
10 changes: 6 additions & 4 deletions packages/vuetify/src/components/VAppBar/VAppBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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'),
Expand Down Expand Up @@ -171,7 +173,7 @@ export const VAppBar = genericComponent<VToolbarSlots>()({
)
})

return layoutIsReady
return {}
},
})

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down Expand Up @@ -144,7 +144,7 @@ export const VBottomNavigation = genericComponent<new <T>(
)
})

return layoutIsReady
return {}
},
})

Expand Down
4 changes: 1 addition & 3 deletions packages/vuetify/src/components/VFooter/VFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'))
Expand Down Expand Up @@ -69,7 +68,6 @@ export const VFooter = genericComponent()({

watchEffect(() => {
layoutItemStyles.value = layout.layoutItemStyles.value
layoutIsReady.value = layout.layoutIsReady
})
})

Expand All @@ -96,7 +94,7 @@ export const VFooter = genericComponent()({
/>
))

return props.app ? layoutIsReady.value : {}
return {}
},
})

Expand Down
7 changes: 1 addition & 6 deletions packages/vuetify/src/components/VLayout/VLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -38,11 +37,7 @@ export const VLayout = genericComponent()({
props.style,
]}
>
<Suspense>
<>
{ slots.default?.() }
</>
</Suspense>
{ slots.default?.() }
</div>
))

Expand Down
10 changes: 4 additions & 6 deletions packages/vuetify/src/components/VLayout/VLayoutItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'),
Expand All @@ -43,7 +43,7 @@ export const VLayoutItem = genericComponent()({
absolute: toRef(props, 'absolute'),
})

useRender(() => (
return () => (
<div
class={[
'v-layout-item',
Expand All @@ -56,9 +56,7 @@ export const VLayoutItem = genericComponent()({
>
{ slots.default?.() }
</div>
))

return layoutIsReady
)
},
})

Expand Down
4 changes: 2 additions & 2 deletions packages/vuetify/src/components/VMain/VMain.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => (
Expand Down Expand Up @@ -54,7 +54,7 @@ export const VMain = genericComponent()({
</props.tag>
))

return layoutIsReady
return {}
},
})

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -314,7 +314,9 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
)
})

return layoutIsReady.then(() => ({ isStuck }))
return {
isStuck,
}
},
})

Expand Down
51 changes: 36 additions & 15 deletions packages/vuetify/src/composables/layout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -126,8 +122,6 @@ export function useLayoutItem (options: {
onDeactivated(() => isKeptAlive.value = true)
onActivated(() => isKeptAlive.value = false)

const layoutIsReady = nextTick()

const {
layoutItemStyles,
layoutItemScrimStyles,
Expand All @@ -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 = (
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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)
Expand All @@ -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: (
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -321,7 +344,6 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
items,
layoutRect,
rootZIndex,
layoutIsReady,
})

const layoutClasses = computed(() => [
Expand All @@ -341,7 +363,6 @@ export function createLayout (props: { overlaps?: string[], fullHeight?: boolean
getLayoutItem,
items,
layoutRect,
layoutIsReady,
layoutRef: resizeRef,
}
}

0 comments on commit 08c3d4f

Please sign in to comment.