Fix diff sidebar flash on page load

[ulrikandersen]

Warning

Attempt to fix the brief display of the diff sidebar on initial load. It is not quite there yet - the sidebar still flashes briefly while the main container's content readjusts.

Summary

• Prevents the right sidebar (diff panel) from flashing during initial page load
• Add mounted state check to RightContainer to delay rendering until client-side hydration completes
• Add mounted state check to ToggleDiffButton to prevent button flash
• Add enableTransitions state to SecondaryContainer to disable margin transitions on initial render

The sidebar still persists open state during SPA navigation via session storage.

[Copilot]

Pull request overview

This PR addresses visual flash issues during initial page load by implementing client-side hydration guards for the diff sidebar components. The changes ensure that sidebar components and buttons only render after the client-side JavaScript has loaded, preventing mismatches between server-rendered and client-rendered states.

Key Changes:

• Added mounted state checks to RightContainer and ToggleDiffButton to delay rendering until after hydration
• Implemented transition disabling on initial render in SecondaryContainer to prevent layout shifts
• Ensured smooth user experience by conditionally applying CSS transitions only after the first paint

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
src/features/sidebar/view/internal/tertiary/RightContainer.tsx	Adds mounted state check to prevent drawer from rendering during SSR
src/features/sidebar/view/internal/secondary/Container.tsx	Implements enableTransitions state to disable margin transitions on initial render and prevent layout shift
src/features/sidebar/view/SecondarySplitHeader.tsx	Adds mounted state check to ToggleDiffButton to prevent button flash during hydration

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

src/features/sidebar/view/SecondarySplitHeader.tsx:135

• Inconsistent hydration delay mechanism: This component uses setTimeout(..., 0) for the mounted state, while RightContainer.tsx uses requestAnimationFrame() for the same purpose. For consistency and to follow the same SSR hydration pattern established in this PR, consider using requestAnimationFrame() here as well:

useEffect(() => {
  requestAnimationFrame(() => {
    setMounted(true)
    setIsMac(checkIsMac())
  })
}, [])

  useEffect(() => {
    // checkIsMac uses window so we delay the check.
    const timeout = window.setTimeout(() => {
      setMounted(true)
      setIsMac(checkIsMac())
    }, 0)
    return () => window.clearTimeout(timeout)
  }, [])

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.