Persist viewport dimensions in a cookie so SSR renders full-height grid skeletons

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
2026-10-17 17:47:28 +02:00
co-authored by Devin
parent 4e6a1c970b
commit abb9ffa1a6
+22 -4
View File
@@ -5,6 +5,8 @@ import { useWindowSize } from '@vueuse/core'
// grid-cols-4 sm:6 md:8 lg:12, auto-rows 6.5rem / sm:7rem / lg:7.5rem, gap-2
const PAGINATION_RESERVE_PX = 60 // Pagination (~36px) + pt-4, knapp bemessen damit die letzte Zeile nicht wegfällt
const FALLBACK_TOP_PX = 150 // SSR-Schätzung: Header + Padding + Filterzeile
const DEFAULT_SSR_WIDTH = 1920
const DEFAULT_SSR_HEIGHT = 1080
interface PageSizeOptions {
// [base, sm (>=640px), lg (>=1024px)] — Zeilenhöhe in rem ohne Grid-Gap
@@ -15,10 +17,26 @@ interface PageSizeOptions {
export function usePageSize(anchor: Ref<HTMLElement | null | undefined>, options: PageSizeOptions = {}) {
const { rowHeights = [6.5, 7, 7.5], gapBelowAnchorPx = 8 } = options
const { width, height } = useWindowSize()
const savedVp = useCookie<{ w: number, h: number }>('vp-size', {
default: () => ({ w: DEFAULT_SSR_WIDTH, h: DEFAULT_SSR_HEIGHT }),
sameSite: 'lax',
})
const { width, height } = useWindowSize({
initialWidth: savedVp.value?.w || DEFAULT_SSR_WIDTH,
initialHeight: savedVp.value?.h || DEFAULT_SSR_HEIGHT,
})
if (import.meta.client) {
watch([width, height], ([w, h]) => {
if (Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0) {
if (savedVp.value?.w !== w || savedVp.value?.h !== h) {
savedVp.value = { w, h }
}
}
}, { immediate: true })
}
const cols = computed(() => {
const w = Number.isFinite(width.value) ? width.value : 1280
const w = Number.isFinite(width.value) ? width.value : (savedVp.value?.w || DEFAULT_SSR_WIDTH)
return w >= 1024 ? 12 : w >= 768 ? 8 : w >= 640 ? 6 : 4
})
@@ -59,8 +77,8 @@ export function usePageSize(anchor: Ref<HTMLElement | null | undefined>, options
watch([width, height], measureAnchor, { flush: 'post' })
const cells = computed(() => {
const w = Number.isFinite(width.value) ? width.value : 1280
const h = Number.isFinite(height.value) ? height.value : 800
const w = Number.isFinite(width.value) ? width.value : (savedVp.value?.w || DEFAULT_SSR_WIDTH)
const h = Number.isFinite(height.value) ? height.value : (savedVp.value?.h || DEFAULT_SSR_HEIGHT)
const rem = import.meta.client
? Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
: 16