fix(VAppBar,VToolbar): vertical main layout shift on SSR request

vuetifyjs · Oct 10, 2024 · f286352 · f286352
1 parent ef13e28
commit f286352
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/packages/vuetify/src/components/VAppBar/VAppBar.tsx b/packages/vuetify/src/components/VAppBar/VAppBar.tsx
@@ -2,7 +2,7 @@
 import './VAppBar.sass'
 
 // Components
-import { makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar'
+import { calculateHeight, makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar'
 
 // Composables
 import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'
@@ -108,8 +108,12 @@ export const VAppBar = genericComponent<VToolbarSlots>()({
     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 = vToolbarRef.value?.contentHeight ?? calculateHeight(props.height, props.density, false)
+      const extensionHeight = vToolbarRef.value?.extensionHeight ??
+        (props.extended || slots.extension?.()
+          ? calculateHeight(props.extensionHeight, props.density, true)
+          : 0
+        )
 
       if (!canHide.value) return (height + extensionHeight)
 

diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.tsx b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
@@ -60,6 +60,15 @@ export const makeVToolbarProps = propsFactory({
   ...makeThemeProps(),
 }, 'VToolbar')
 
+export function calculateHeight (height: number | string, density: Density, forExtensionHeight: boolean) {
+  return parseInt((
+    Number(height) +
+    (density === 'prominent' ? Number(height) : 0) -
+    (density === 'comfortable' ? forExtensionHeight ? 4 : 8 : 0) -
+    (density === 'compact' ? forExtensionHeight ? 8 : 16 : 0)
+  ), 10)
+}
+
 export type VToolbarSlots = {
   default: never
   image: never
@@ -83,19 +92,13 @@ export const VToolbar = genericComponent<VToolbarSlots>()({
     const { rtlClasses } = useRtl()
 
     const isExtended = shallowRef(!!(props.extended || slots.extension?.()))
-    const contentHeight = computed(() => parseInt((
-      Number(props.height) +
-      (props.density === 'prominent' ? Number(props.height) : 0) -
-      (props.density === 'comfortable' ? 8 : 0) -
-      (props.density === 'compact' ? 16 : 0)
-    ), 10))
+    const contentHeight = computed(() => calculateHeight(
+      props.height,
+      props.density,
+      false,
+    ))
     const extensionHeight = computed(() => isExtended.value
-      ? parseInt((
-        Number(props.extensionHeight) +
-        (props.density === 'prominent' ? Number(props.extensionHeight) : 0) -
-        (props.density === 'comfortable' ? 4 : 0) -
-        (props.density === 'compact' ? 8 : 0)
-      ), 10)
+      ? calculateHeight(props.extensionHeight, props.density, true)
       : 0
     )