Debounce auto submission (Query change)

[Renzo-codespace]

Implementing debounce to cancel previous searches and only submit latest queries

Scenario:

• User quickly changes the search query

  Given:

  • I am a user on the search page of the recipe app

  When:

  • I type a query into the search box
  • AND I quickly erase it and type a new query

  Then:

  • The app should cancel the previous search
  • AND only submit the latest search query after I stop typing

[Renzo-codespace]

I am able to make the search result flicker between searches. Perhaps a demonstration would illustrate this problem better than a description here.

[Renzo-codespace]

Searching for "rice" (progress bar showed query had started), then changing search term to "banana bread", we observed that the results for "rice" were rendered and shortly thereafter replaced by the results for "banana bread".

[ElzabeEls]

Extra notes from yesterday:

• Debounce on short query was triggered in long query before long query was submitted so results for 'chocolate' showed up when input was 'choloclate balls'
• 'bread banana raisin' did not show any results, but results do show in Compass
• Add Enter button functionality?