Perf patches#7
Conversation
Move cn map building (cardnames loop + Localization.mSource.mTerms loop +
Object.fromEntries) from inside i18n() to module load time. Add per-language
function cache so i18n('cn') returns the same function reference on repeated
calls, which is important for React.memo and useMemo dependency stability.
popupMatchSelectWidth={false} disables antd's virtual scrolling, forcing
all ~686 card options to render and be measured to determine popup width
on every interaction. Using a fixed pixel width (300) enables virtual
scrolling. This was the 0w0k#1 performance bottleneck (INP ~1,288ms → ~80ms).
Add .no-motion CSS class that sets animation-duration and transition-duration to 0s. Apply popupClassName="no-motion" to all TreeSelect components (card picker, talent picker, Five Elements Pure Vase, Swordplay Talent) to eliminate slide/fade animation overhead.
@dnd-kit uses React context, causing all 16+ cards to re-render on every drag frame. Replace with native HTML5 drag-and-drop using refs for drag state and DOM class manipulation for visual feedback (.drag-source, .drag-over). Zero React re-renders during drag. Remove @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities from package.json.
Pre-compute pinyin (full + first-letter) for all card names and talent titles at useMemo time instead of calling getPinyin() on every keystroke for every option. The cache is built once when the language changes and reused across all filter calls. Keeps upstream's heteronym support (heteronym: true, compact: true) in the cached values.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e4f5d94fd8
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| draggable | ||
| onDragStart={onDragStart} | ||
| onDragOver={onDragOver} | ||
| onDrop={onDrop} | ||
| onDragEnd={onDragEnd} |
There was a problem hiding this comment.
This change relies entirely on native HTML5 drag events (draggable + onDrag*) for reordering cards, but those events are not available on many touch-only browsers (notably iOS Safari), so mobile users can no longer reorder decks. The previous implementation explicitly wired touch behavior via TouchSensor; after this change there is no touch fallback path, so drag-and-drop becomes desktop-only.
Useful? React with 👍 / 👎.
1 participant
No description provided.