-
-
Notifications
You must be signed in to change notification settings - Fork 5.3k
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
Speed up show & hide filter #5411
Conversation
the useListController hook returned show and hide filter functions based on the debounced setFilters function. No need to debounce (and to wait for 500 millisecons) to show or hide a filter! This improves filtering in a noticeable way.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is great for the user experience, side bar filters feel a lot more responsive !
const displayedFilters = Object.keys(displayedFilterValues).reduce( | ||
(filters, filter) => { | ||
return filter !== filterName | ||
? { ...filters, [filter]: true } | ||
: filters; | ||
}, | ||
{} | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Perhaps it is more easy to read with a simple loop ?
const displayedFilters = Object.keys(displayedFilterValues).reduce( | |
(filters, filter) => { | |
return filter !== filterName | |
? { ...filters, [filter]: true } | |
: filters; | |
}, | |
{} | |
); | |
const displayedFilters = {} | |
for(filter in displayedFilterValues) { | |
if(filter !== filterName) displayedFilters[filter] = true | |
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
that's a matter of taste... and I don't particularly like for
loops.
const filters = Object.keys(filterValues).reduce( | ||
(acc, key) => | ||
keysToRemove.includes(key) | ||
? acc | ||
: { ...acc, [key]: filterValues[key] }, | ||
{} | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you are agree with the previous comment, this one can also be written with a loop:
const filters = Object.keys(filterValues).reduce( | |
(acc, key) => | |
keysToRemove.includes(key) | |
? acc | |
: { ...acc, [key]: filterValues[key] }, | |
{} | |
); | |
const filters = {} | |
for(filter in filters) { | |
if(keysToRemove.includes(filter)) filters[key] = filterValues[filter] | |
} |
The
useListController
hook returned show and hide filter functions based on the debounced setFilters function. No need to debounce (and to wait for 500 millisecons) to show or hide a filter!Also, the FiltrListItems (for the ListSidebar) don't need a 500ms delay either.
This improves filtering UX in a noticeable way.