From 6d649d8dc4c96c18d336ff88864223f2e13c642c Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 18 Mar 2026 20:01:01 +0100
Subject: [PATCH] fix: reserve sidebar space with placeholder during SSR
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 components/dashboard/DashboardShell.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index 4f744c6..d319ef0 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -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,