Fix flash of diff sidebar and toggle button during page load

Prevent the right drawer and toggle button from rendering during SSR/hydration
by adding a mounted state check. Components only render after the client has
mounted and session storage state has been properly read.

Author: ulrikandersen

src/features/sidebar/view/SecondarySplitHeader.tsx

@@ -123,7 +123,10 @@ 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(() => {
+    setMounted(true)
     // checkIsMac uses window so we delay the check.
     const timeout = window.setTimeout(() => {
       setIsMac(checkIsMac())
@@ -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/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,13 @@ const RightContainer = ({
   onClose?: () => void
   children?: React.ReactNode
 }) => {
+  // Prevent flash of drawer during SSR/hydration. Only render after client mount
+  // when session storage state has been properly read.
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+  if (!mounted) return null
   return (
     <>
       <InnerRightContainer