Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

URLInput: Use debounce() instead of throttle() #26529

Merged
merged 1 commit into from Oct 29, 2020

Conversation

noisysocks
Copy link
Member

Fixes #26358.

Wait until the user finishes or pauses typing before sending an AJAX request. This ensures that there isn't an AJAX request sent every 200 ms while the user is typing.

https://css-tricks.com/debouncing-throttling-explained-examples/

Testing

  1. Type some text into a Paragraph.
  2. Select some text and click Link or press Cmd+K.
  3. Open DevTools and select the Network tab.
  4. Type some text quickly. The AJAX request shouldn't happen until you pause typing.
  5. Type some text slowly. Several AJAX requests should be issued.

@noisysocks noisysocks added [Type] Bug An existing feature does not function as intended [Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) labels Oct 28, 2020
@noisysocks noisysocks added this to Needs Review in WordPress 5.6.x Must Haves via automation Oct 28, 2020
@noisysocks noisysocks added the Backport to WP Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 28, 2020
@github-actions
Copy link

github-actions bot commented Oct 28, 2020

Size Change: -2 B (0%)

Total Size: 1.2 MB

Filename Size Change
build/block-editor/index.js 130 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.78 kB 0 B
build/api-fetch/index.js 3.45 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 8.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 11.1 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.94 kB 0 B
build/block-library/editor.css 8.94 kB 0 B
build/block-library/index.js 145 kB 0 B
build/block-library/style-rtl.css 7.75 kB 0 B
build/block-library/style.css 7.75 kB 0 B
build/block-library/theme-rtl.css 837 B 0 B
build/block-library/theme.css 838 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/index.js 172 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.81 kB 0 B
build/core-data/index.js 12.3 kB 0 B
build/data-controls/index.js 675 B 0 B
build/data/index.js 8.77 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.46 kB 0 B
build/edit-navigation/index.js 11.2 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.37 kB 0 B
build/edit-post/style.css 6.35 kB 0 B
build/edit-site/index.js 21.9 kB 0 B
build/edit-site/style-rtl.css 3.79 kB 0 B
build/edit-site/style.css 3.79 kB 0 B
build/edit-widgets/index.js 26.4 kB 0 B
build/edit-widgets/style-rtl.css 3.09 kB 0 B
build/edit-widgets/style.css 3.09 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/index.js 43.1 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 7.7 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 712 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.34 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.42 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 3.06 kB 0 B
build/rich-text/index.js 13.2 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

Wait until the user finishes typing before sending an AJAX request. This
ensures that there isn't an AJAX request sent every 200 ms while the
user is typing.
Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works as described, send 4 requests for 22 typed chars 👍

@noisysocks noisysocks added Backport to WP Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release and removed Backport to WP Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Oct 29, 2020
@noisysocks noisysocks merged commit 68083d0 into master Oct 29, 2020
WordPress 5.6.x Must Haves automation moved this from Needs Review to Done Oct 29, 2020
@noisysocks noisysocks deleted the fix/debounce-url-input branch October 29, 2020 02:52
@github-actions github-actions bot added this to the Gutenberg 9.3 milestone Oct 29, 2020
talldan pushed a commit that referenced this pull request Oct 29, 2020
Wait until the user finishes typing before sending an AJAX request. This
ensures that there isn't an AJAX request sent every 200 ms while the
user is typing.
noisysocks added a commit that referenced this pull request Oct 29, 2020
* Refactor BlockMover to use React hooks (#24774)

* Add drag handle to block toolbar (#24852)

* Add drag handle to block mover component

* Switch draggable chip to reflect toolbar layout

* Use drag cursor

* Hide drag handle on mobile or in top toolbar mode

* Adjust handle and structure.

* Size the switcher.

* Adjust mover.

* Update icon for handle.

* Update movers buttons.

* Fix groups.

* Focus for switcher.

* Handle focus.

* Fix top toolbar.

* Popover fix.

* Fix spacing issue.

* Harmonize spacing.

* Try small independen transition for up / down.

* Reduce motion.

* use dragHandle icon in draggable chip

* Make draggable chip use same icon as toolbar

* Revert "Make draggable chip use same icon as toolbar"

This reverts commit d031006.

* Revert offset change and ensure cursor does not overlap chip block info

* Update snapshots to reflect chevron icon change

Co-authored-by: jasmussen <joen@automattic.com>
Co-authored-by: Matías Ventura <mv@matiasventura.com>

* Fix issue with single block. (#25107)

* Remove animation from mover buttons. (#25728)

The animation was intended to better convey direction, and were added as an experiment. It doesn't seem successful, so let's remove it again.

* add label in drag and drop button (#25606)

* Change toolbar drag remove labels (#25614)

* Refactor toolabar drag+remove labels

* fix tests

* fixes #24845 (#24847)

* Fix: Post schedule label showing wrong time if site and user timezones did not match (#26212)

* URLInput: Use debounce() instead of throttle() (#26529)

Wait until the user finishes typing before sending an AJAX request. This
ensures that there isn't an AJAX request sent every 200 ms while the
user is typing.

* Update browserlist dependency (#24756)

* Fix composer test failures due to invalid lock (#26472)

* Update package-lock.json

* Set dev environment to use WordPress 5.5

Co-authored-by: Chris Alexander <cmalex@gmail.com>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Co-authored-by: jasmussen <joen@automattic.com>
Co-authored-by: Matías Ventura <mv@matiasventura.com>
Co-authored-by: Joen A <1204802+jasmussen@users.noreply.github.com>
Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
Co-authored-by: Ari Stathopoulos <aristath@gmail.com>
Co-authored-by: Jorge Costa <jorge.costa@automattic.com>
Co-authored-by: Riad Benguella <benguella@gmail.com>
Co-authored-by: Marcus Kazmierczak <marcus@mkaz.com>
@mtias
Copy link
Member

mtias commented Oct 29, 2020

Curious if there was any rationale initially for throttling this behaviour?

@noisysocks
Copy link
Member Author

It was throttle() ever since link suggestions were added in #1985. I couldn't see any discussion about throttle() vs debounce() there. Maybe @youknowriad remembers?

@noisysocks noisysocks removed the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Oct 29, 2020
tellthemachines pushed a commit that referenced this pull request Oct 30, 2020
Wait until the user finishes typing before sending an AJAX request. This
ensures that there isn't an AJAX request sent every 200 ms while the
user is typing.
@tellthemachines tellthemachines mentioned this pull request Oct 30, 2020
6 tasks
@youknowriad
Copy link
Contributor

No big thoughts here, I guess my original thinking is that if the user continuously types, we should at least show results from time to time. arguable obviously.

tellthemachines added a commit that referenced this pull request Nov 2, 2020
* nest content styles in container for higher specificity (#26487)

* Reusable Blocks: Make the number retrieved from the API unlimited (#26486)

* Make the number of reusable blocks returned from the API unlimited

This is to fix #26352. Having no limit seems like it could be risky, but
there are a number of other places in the codebase where all entities
are returned in one call to the API, including categories, which could
return a similar amount of data to this.

* Remove unnecessary quotes to fix lint error.

* Fix block inserter WSOD when an empty reusable block exists (#26484)

* Latest Posts: Bring back classname on post list (#26477)

* [Heading Block] Fix double alignment controls in toolbar (#26492)

* fix heading alignments

* add proper supports in deprecation

* update all previous deprecations

* regenerate fixtures for heading

* change migration call

* remove previous className + revert saves

* Revert "regenerate fixtures for heading"

This reverts commit 27af8c3.

* change fixtures

* create new fixtures + fix deprecation save

* address review feedback

* URLInput: Use debounce() instead of throttle() (#26529)

Wait until the user finishes typing before sending an AJAX request. This
ensures that there isn't an AJAX request sent every 200 ms while the
user is typing.

* Fix single column block display for smaller screens. (#26438)

If there is only one column, don't force a 50% flex-basis for small screens.

* Fix incorrectly pluralised strings (#26565)

* Change block mover label i18n

* Update remove block i18n

* Ensure footer remains position fixed when navigating regions (#26533)

* Update package-lock file to ensure static analysis task passes (#26528)

* Removes extra fullstop (#26586)

Co-authored-by: Addison Stavlo <Stavz01@gmail.com>
Co-authored-by: Paul Bunkham <paul@dobit.co.uk>
Co-authored-by: Noah Allen <noahtallen@gmail.com>
Co-authored-by: Kelly Dwan <ryelle@users.noreply.github.com>
Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
Co-authored-by: Robert Anderson <robert@noisysocks.com>
Co-authored-by: Aaron D. Campbell <aaron@AaronDCampbell.com>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Co-authored-by: Tammie Lister <tammie@automattic.com>
@tellthemachines tellthemachines removed the Backport to WP Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 2, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) [Type] Bug An existing feature does not function as intended
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

Search for posts when adding links is potentially VERY slow
5 participants