UI becomes unresponsive while searching docs
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 141
- Forks
- 86
- PR merge metrics
- No merged PRs in 30d
Description
## Description
When searching the docs, while typing in the search field, UI becomes unresponsive. The issue seems to be caused due to the fact that the whole page is repainted on every keystroke and the event handler responsible to perform the search does not seem to be debounced. As a side note, if you switch to the docs of version 2.4.2, the issue still exists but is less obvious as the length of the page is much smaller than when in version 4.17.15 (latest at the time of writing).
Enabling "Paint flashing" in Chromium developer tools might be helpful for debugging.

## Steps to reproduce
- Navigate to the latest version of the documentation page (https://lodash.com/docs/4.17.15 in my case).
- Try to type something in search field, eg "compact".
### Expected result
UI should be responsive while user types in search field.
### Actual result
Searching causes the whole page (which is long) to repaint on every keystroke resulting in UI being unresponsive.
### Device details
Chromium: 87.0.4280.67 (Official Build) (x86_64)
### Additional information
Issue seems to be more obvious in Chromium browsers (tested in both MacOS and Linux). Tested in Firefox 83.0 and Safari 14.0 and they don't seem to suffer that much.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the lodash.com documentation page and its search field, reproducing the problem in Chromium with Paint flashing enabled. The issue is done when typing remains responsive and the long documentation page no longer repaints on every keystroke.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- documentation, frontend, performance, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100