fix(sidebar): hydrate collapse state before paint to stop refresh flash

The collapsed sidebar swaps entire subtrees (collapsed flyout vs expanded
lists), but isCollapsed only resolved after the first paint via auto
rehydration, so a collapsed reload rendered the expanded tree into the 51px
rail and then reflowed — the misplaced/flashing content on refresh.

Adopt zustand's documented SSR pattern: skipHydration on the persist config
(first render keeps the default false, matching SSR HTML) and flush
persist.rehydrate() from a useLayoutEffect so the correct structure commits
in the same pre-paint frame. Removes the old race where onRehydrateStorage
lifted the data-sidebar-collapsed mask before React committed the rail.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -382,6 +382,15 @@ export const Sidebar = memo(function Sidebar() {
   const toggleCollapsed = useSidebarStore((state) => state.toggleCollapsed)
   const isOnWorkflowPage = !!workflowId
 
+  // Hydrate the persisted sidebar state before the browser paints. The store
+  // sets `skipHydration` so its default (`isCollapsed: false`) matches the SSR
+  // HTML on first render; flushing rehydration here re-renders the correct
+  // collapsed/expanded structure synchronously in the same pre-paint commit,
+  // preventing the expanded tree from flashing inside the collapsed rail.
+  useLayoutEffect(() => {
+    void useSidebarStore.persist.rehydrate()
+  }, [])
+
   const isCollapsedRef = useRef(isCollapsed)
   useLayoutEffect(() => {
     isCollapsedRef.current = isCollapsed

apps/sim/stores/sidebar/store.ts

@@ -58,6 +58,16 @@ export const useSidebarStore = create<SidebarState>()(
     }),
     {
       name: 'sidebar-state',
+      /**
+       * Hydration is driven manually from a `useLayoutEffect` (see Sidebar) so it
+       * runs synchronously before the first paint. Auto-hydration would either
+       * (a) run at module load and make the client's first render disagree with
+       * the server's `isCollapsed: false` HTML — a mismatch React recovers from by
+       * flashing the server tree, or (b) run after paint, reflowing the expanded
+       * tree into the collapsed rail. Skipping it lets the layout effect flip the
+       * structure in the same pre-paint commit, so neither flash is visible.
+       */
+      skipHydration: true,
       onRehydrateStorage: () => (state) => {
         if (state) {
           state.setHasHydrated(true)