Bad performance on very large crosswords

[nsunderland1]

Huge crosswords (e.g. this) are very slow to interact with. Jumping to a word takes ~2s, letters take over a second to appear after typing, and I run into a fair number of desyncs (mostly words getting cleared right after filling them in). Tested on a stable internet connection with both Chrome and Firefox.

Not sure if this is an inevitable consequence of a puzzle this big or if there's something to be optimized here. Thanks for the fantastic website by the way :)

[stevenhao]

Thanks for opening this issue! Pushed 2 commits to address this as I too stumbled upon this super mega puzzle recently 😂 .

https://github.com/downforacross/downforacross.com/commit/7e5fe16fe639b315d7a6882762753cb6bfd4f6b6 https://github.com/downforacross/downforacross.com/commit/3bd96b81be9880ec2447bd8923e548260267ca0f

From profiling via chrome dev tools, the remaining performance bottleneck is rendering the list of clues (somewhat surprising). Some ideas for follow-ups (though I don't intend to go further into optimizing this unless I get really bored...):

• Debouncing the scroll-to-clue update via requestAnimationFrame
• Use something like react-window to reduce number of DOM nodes in the clue list
• Give the clue list component the same make-props-constant-refs treatment that was given to Grid, to reduce number of rerenders that the pure/memoized component needs to do.

If anyone wants to take this on let me know and I'd be happy to offer guidance!

[carlyrobison]

If rendering the clues is the problem, we can just render the clues our cursor is on in a "limited clue list for large puzzles" mode. We could do just the two intersecting, or the 2-3 surrounding it numberswise.