1.3 KiB
1.3 KiB
Work Plan - Optimize Resize Performance
Request
The user reported that the resize functionality was laggy, slow, and inconsistent.
Changes
-
Refactoring Strategy:
- Removed React state updates from the
mousemoveevent loop. - Used
useRefto tracksidebarWidthandpoolHeightvalues. - Used
requestAnimationFrameto throttle DOM updates directly during resizing. - Only triggered React state updates (re-renders) on
mouseup.
- Removed React state updates from the
-
DraftView.tsx:
- Implemented
resizingStateref. - Modified
handleMouseDownto initiate direct DOM resizing. - Modified
onMouseMoveto update element styles directly. - Modified
onMouseUpto sync final size to React state. - Applied refs to Sidebar and Pool resizing areas.
- Implemented
-
DeckBuilderView.tsx:
- Implemented identical ref-based + requestAnimationFrame resizing logic.
- Fixed several HTML nesting errors introduced during the complex refactoring process.
Verification
- Performance: Resizing should now be smooth (60fps) as it avoids React reconciliation during the drag.
- Consistency: The handle should no longer "slip" because the visual update is faster.
- Persistence: The final size is still saved to
state(and thuslocalStorage) after release.