lodash / lodash/lodash.com

UI becomes unresponsive while searching docs

Open
#231 4 comments 4 reactions 0 assignees View on GitHub

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.

![screenshot](https://user-images.githubusercontent.com/6596039/100340483-f20dbb80-2fe3-11eb-99c7-fd524e26a845.gif)

## 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.