fix: reserve sidebar space with placeholder during SSR

With ssr:false, the sidebar rendered nothing in server HTML, so the
content area took full width and page content (site name "Ciphera")
appeared in the sidebar zone. Now the dynamic import has a loading
placeholder — a 64px div with matching border/background that reserves
the sidebar space in the server HTML. Content area never occupies the
sidebar zone. Sidebar replaces the placeholder on client mount.
This commit is contained in:
Usman Baig
2026-03-18 20:01:01 +01:00
parent 7ed04fb85c
commit 6d649d8dc4

View File

@@ -4,8 +4,18 @@ import { useState, useCallback } from 'react'
import dynamic from 'next/dynamic'
import ContentHeader from './ContentHeader'
// Load sidebar only on the client — prevents any SSR flash of text/labels
const Sidebar = dynamic(() => import('./Sidebar'), { ssr: false })
// Load sidebar only on the client — prevents SSR flash
const Sidebar = dynamic(() => import('./Sidebar'), {
ssr: false,
// Placeholder reserves the sidebar's space in the server HTML
// so page content never occupies the sidebar zone
loading: () => (
<div
className="hidden md:block shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl"
style={{ width: 64 }}
/>
),
})
export default function DashboardShell({
siteId,