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

Speed up show & hide filter #5411

Merged
merged 3 commits into from
Oct 19, 2020
Merged

Speed up show & hide filter #5411

merged 3 commits into from
Oct 19, 2020

Conversation

fzaninotto
Copy link
Member

@fzaninotto fzaninotto commented Oct 16, 2020

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.

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.
@fzaninotto fzaninotto added this to the 3.10.0 milestone Oct 16, 2020
Copy link
Contributor

@EmrysMyrddin EmrysMyrddin left a 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 !

Comment on lines +227 to +234
const displayedFilters = Object.keys(displayedFilterValues).reduce(
(filters, filter) => {
return filter !== filterName
? { ...filters, [filter]: true }
: filters;
},
{}
);
Copy link
Contributor

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 ?

Suggested change
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
}

Copy link
Member Author

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.

Comment on lines +161 to +167
const filters = Object.keys(filterValues).reduce(
(acc, key) =>
keysToRemove.includes(key)
? acc
: { ...acc, [key]: filterValues[key] },
{}
);
Copy link
Contributor

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:

Suggested change
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]
}

@djhi djhi merged commit 50ba45c into next Oct 19, 2020
@djhi djhi deleted the sppedup-show-hide-filter branch October 19, 2020 07:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants