Fix diff sidebar flash on page load

Author: ulrikandersen

src/features/sidebar/view/SecondarySplitHeader.tsx

@@ -123,9 +123,12 @@ const ToggleDiffButton = ({
   isDiffAvailable: boolean
 }) => {
   const [isMac, setIsMac] = useState(false)
+  // Prevent flash of button during SSR/hydration. Only render after client mount.
+  const [mounted, setMounted] = useState(false)
   useEffect(() => {
     // checkIsMac uses window so we delay the check.
     const timeout = window.setTimeout(() => {
+      setMounted(true)
       setIsMac(checkIsMac())
     }, 0)
     return () => window.clearTimeout(timeout)
@@ -138,6 +141,7 @@ const ToggleDiffButton = ({
     : isDiffbarOpen
     ? "Hide changes"
     : "Show changes"
+  if (!mounted) return null
   return (
     <Box sx={{ display: isSidebarTogglable ? "block" : "none" }}>
 

src/features/sidebar/view/internal/secondary/Container.tsx

@@ -1,3 +1,6 @@
+"use client"
+
+import { useState, useEffect } from "react"
 import { SxProps } from "@mui/system"
 import { Box, Stack } from "@mui/material"
 import { styled } from "@mui/material/styles"
@@ -18,15 +21,23 @@ const SecondaryContainer = ({
   children?: React.ReactNode,
   isSM: boolean,
 }) => {
+  // Disable transitions on initial render to prevent layout shift
+  const [enableTransitions, setEnableTransitions] = useState(false)
+  useEffect(() => {
+    // Enable transitions after first paint
+    const rafId = requestAnimationFrame(() => setEnableTransitions(true))
+    return () => cancelAnimationFrame(rafId)
+  }, [])
+
   const sx = { overflow: "hidden" }
   return (
     <>
       <InnerSecondaryContainer
-    
         sidebarWidth={isSM ? sidebarWidth : 0}
         isSidebarOpen={isSM ? offsetContent:  false}
         diffWidth={isSM ? (diffWidth || 0) : 0}
         isDiffOpen={isSM ? (offsetDiffContent || false) : false}
+        enableTransitions={enableTransitions}
         sx={{ ...sx }}
       >
         {children}
@@ -43,19 +54,20 @@ interface WrapperStackProps {
   readonly isSidebarOpen: boolean
   readonly diffWidth: number
   readonly isDiffOpen: boolean
+  readonly enableTransitions: boolean
 }
 
 const WrapperStack = styled(Stack, {
-  shouldForwardProp: (prop) => prop !== "isSidebarOpen" && prop !== "sidebarWidth" && prop !== "diffWidth" && prop !== "isDiffOpen"
-})<WrapperStackProps>(({ theme, sidebarWidth, isSidebarOpen, diffWidth, isDiffOpen }) => {
+  shouldForwardProp: (prop) => prop !== "isSidebarOpen" && prop !== "sidebarWidth" && prop !== "diffWidth" && prop !== "isDiffOpen" && prop !== "enableTransitions"
+})<WrapperStackProps>(({ theme, sidebarWidth, isSidebarOpen, diffWidth, isDiffOpen, enableTransitions }) => {
   return {
-    transition: theme.transitions.create(["margin", "width"], {
+    transition: enableTransitions ? theme.transitions.create(["margin", "width"], {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen
-    }),
+    }) : "none",
     marginLeft: isSidebarOpen ? 0 : `-${sidebarWidth}px`,
     marginRight: isDiffOpen ? 0 : `-${diffWidth}px`,
-    ...((isSidebarOpen || isDiffOpen) && {
+    ...((isSidebarOpen || isDiffOpen) && enableTransitions && {
       transition: theme.transitions.create(["margin", "width"], {
         easing: theme.transitions.easing.easeOut,
         duration: theme.transitions.duration.enteringScreen,
@@ -69,13 +81,15 @@ const InnerSecondaryContainer = ({
   isSidebarOpen,
   diffWidth,
   isDiffOpen,
+  enableTransitions,
   children,
   sx
 }: {
   sidebarWidth: number
   isSidebarOpen: boolean
   diffWidth: number
   isDiffOpen: boolean
+  enableTransitions: boolean
   children: React.ReactNode
   sx?: SxProps
 }) => {
@@ -87,8 +101,9 @@ const InnerSecondaryContainer = ({
       isSidebarOpen={isSidebarOpen}
       diffWidth={diffWidth}
       isDiffOpen={isDiffOpen}
+      enableTransitions={enableTransitions}
       sx={{ ...sx, width: "100%", overflowY: "auto" }}
-      
+
     >
       <RaisedMainContent>
         {children}

src/features/sidebar/view/internal/tertiary/RightContainer.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useState, useEffect } from "react"
 import { SxProps } from "@mui/system"
 import { Drawer as MuiDrawer } from "@mui/material"
 import { useTheme } from "@mui/material/styles"
@@ -15,6 +16,12 @@ const RightContainer = ({
   onClose?: () => void
   children?: React.ReactNode
 }) => {
+  // Don't render drawer until client-side to prevent flash
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    requestAnimationFrame(() => setMounted(true))
+  }, [])
+  if (!mounted) return null
   return (
     <>
       <InnerRightContainer