Files
mtg-online-drafter/docs/development/devlog/2025-12-18-034500_slider_optimization.md

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 localCardScale for immediate slider feedback.
    • Used CSS Variable --card-scale on container to update card sizes entirely via CSS during drag.
    • Deferred cardScale state update (which triggers React re-renders) to onMouseUp.
  • DeckBuilderView.tsx:

    • Introduced localCardWidth for immediate slider feedback.
    • Used CSS Variable --card-width on container.
    • Updated gridTemplateColumns to use var(--card-width).
    • Deferred cardWidth state update to onMouseUp.
    • Cleaned up duplicate state declarations causing lint errors.
  • CubeManager.tsx:

    • Introduced localCardWidth and CSS Variable --card-width.
    • Updated Grid layout to use CSS Variable.
    • Deferred state update to onMouseUp.

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.