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:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user