Problem

When the app loads with sidebarOpen persisted as true in settings, CSS transition classes cause the sidebar to visibly animate from closed → open. This happens because:

1. useSettings() uses useQuery, so sidebarOpen initially defaults to false while the async settings fetch is in-flight
2. When the query resolves with sidebarOpen: true, the sidebar width changes from w-0 → w-64
3. All five transition classes (transition-[width], transition-[left], transition-opacity, transition-all) are applied unconditionally, so the browser animates this state change

The result is a slide-open animation every time the app loads — the sidebar should appear instantly in its saved state.

Solution

Defer CSS transition classes until after the first paint using a hasMounted state flag:

const [hasMounted, setHasMounted] = useState(false);

useEffect(() => {
  requestAnimationFrame(() => {
    setHasMounted(true);
  });
}, []);

All five transition class locations are conditionally applied:

className={`... ${hasMounted ? "transition-[width] duration-300" : ""} ...`}

• Before mount: No transition classes → sidebar renders at its correct width instantly
• After mount: Transition classes applied → sidebar toggle animates smoothly as before

Using requestAnimationFrame (instead of bare useEffect) ensures the transition suppression survives the full browser paint cycle, preventing any flash of animation even on slower renders.

Changes

• app/ui/app/src/components/layout/layout.tsx — 1 file, +15/-5 lines
  • Added hasMounted state with useEffect + requestAnimationFrame
  • Conditionally applied all 5 transition classes only when hasMounted === true

Testing

• TypeScript: tsc -b — zero errors
• Vitest: 27/27 tests passing, zero regressions
• Vite build: builds successfully
• ESLint: passes
• Prettier: passes

Behavior

Fixes #12954