1.3 KiB
1.3 KiB
Work Plan - Optimize Card Slider Performance
Request
The user reported that resize handlers (likely sliders) were still laggy.
Changes
-
DraftView.tsx:
- Introduced
localCardScalefor immediate slider feedback. - Used CSS Variable
--card-scaleon container to update card sizes entirely via CSS during drag. - Deferred
cardScalestate update (which triggers React re-renders) toonMouseUp.
- Introduced
-
DeckBuilderView.tsx:
- Introduced
localCardWidthfor immediate slider feedback. - Used CSS Variable
--card-widthon container. - Updated
gridTemplateColumnsto usevar(--card-width). - Deferred
cardWidthstate update toonMouseUp. - Cleaned up duplicate state declarations causing lint errors.
- Introduced
-
CubeManager.tsx:
- Introduced
localCardWidthand CSS Variable--card-width. - Updated Grid layout to use CSS Variable.
- Deferred state update to
onMouseUp.
- Introduced
Verification
- Performance: Slider dragging should now be 60fps smooth as it touches 0 React components during the drag, only updating a single CSS variable on the root container.
- Persistence: Releasing the slider saves the value to state and localStorage.
- Logic: complex logic like
useArtCrop(which depends on specific widths) updates safely on release, preventing flicker or heavy recalculations during drag.