jsdrupal / drupal-admin-ui

This is an admin UI for Drupal, built with JavaScript & React. ⬅️✌️➡️
Other
237 stars 91 forks source link

Cut - off unnecessary API hits for title filtering on Content page #440

Open vishalchandna1 opened 6 years ago

vishalchandna1 commented 6 years ago

For the title filtering on content, a request is fired on every character change which is unnecessary and creating a stuttery user experience while typing. e.g If I need to search a title baking then it would fire 6 API requests ['b', 'ba', 'bak', 'baki', 'bakin', ''baking'] and it doesn't make sense to fire off all the requests to reach our end goal. baking

we need to cut-off all other unnecessary requests in order to efficiently utilize the API and provide a seamless user experience.

vishalchandna1 commented 6 years ago

Without optimizations https://drive.google.com/file/d/1E7QPmaLCdYLLz1UvCpSuIM8SDiukJPLD/view With Optimizations https://drive.google.com/file/d/1JG3L5-lCX50W2qA2x32rwv73u6Du4eSF/view

  1. In the first video, when a user is typing, it is a bit stuttery as we are firing APIs on every letter change or even blank spaces but with optimizations in place, it works very smoothly.

  2. With this API hits are tremendously reduced.

  3. If you also see, the loading is also consistent and it doesn't go back and forth when a user is typing.

dawehner commented 6 years ago

This is much nicer! Thank you @vishalchandna1 Do you think half a second is okay in terms of waiting time? I would have expected a lower number to be honest.

vishalchandna1 commented 6 years ago

Yep, we can do some experiments here to find the optimum value.

vishalchandna1 commented 6 years ago

@dawehner I have experimented with it a lot and we can go for 400ms. Going below that may cause a few more API calls than usual, which depends on the typing speed of the user. It works seamlessly, Even with 500ms the delay is not noticeable at all. I have updated the PR with 400ms too :)