fix sidebar resize lag

[imohammedh]

the resize handle was calling setSidebarWidth on every mouse move frame which triggered a full react re-render cascade through the entire sidebar context — including all consumers like AppSidebar and HomeContent — 60 times per second during a drag. it was also writing to document.cookie on every frame which is just unnecessary i/o on the hot path.

what changed:

sidebar.tsx — swapped useState for useRef on the resizing flag so toggling it doesn't cause a re-render. moved mousemove/mouseup listeners into a single stable useEffect that runs once on mount instead of re-registering on every state change. during drag, width is now applied by directly mutating the css variable on the wrapper element and setting inline styles on the sidebar panel and spacer div — no react involved. setSidebarWidth (and the cookie write) is called exactly once on mouseup with the final value. added a data-resizing attribute on drag start that's picked up by an injected style rule to kill all transitions inside the wrapper while dragging, which prevents the right side from animating toward the new width instead of following it instantly. added spacerRef to the spacer div so it can be updated directly in sync with the sidebar during drag.

HomeClientLayout.tsx — removed transition-all duration-300 ease-in-out from the <main> element. this was the biggest visible offender — the content area was smoothly animating its position on every pixel of mouse movement.

result: re-renders per drag went from ~60/sec to exactly 1 on release. cookie writes same. the right side now follows the drag handle frame-perfectly.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
notevo	Building	Preview, Comment	Feb 28, 2026 1:24am