graylog2-server icon indicating copy to clipboard operation
graylog2-server copied to clipboard

Add async capabilities to react select

Open ousmaneo opened this issue 3 years ago • 1 comments

Before these changes, Select with a high number of options (1000) would result in performance problems. This #12250 from @maxiadlovskii adds the ability to use react-window to virtualize the list when the number of options is high, giving better performance. With this change, we are adding a layer that is using react-window-infinite-loader to be able to load items asynchronously when scrolling. This also add the ability to filter the options using an async call.

As an example we added a new UserSelectField that can be used in place of a users list select.

TODOs

  • [ ] Adjust the search filter debounce
  • [ ] Test on Formik

Motivation and Context

For context see issue and task

Screenshots (if appropriate):

Types of changes

  • [x] Bug fix (non-breaking change which fixes an issue)
  • [x] New feature (non-breaking change which adds functionality)
  • [ ] Refactoring (non-breaking change)
  • [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • [x] My code follows the code style of this project.
  • [ ] My change requires a change to the documentation.
  • [ ] I have updated the documentation accordingly.
  • [x] I have read the CONTRIBUTING document.
  • [ ] I have added tests to cover my changes.

ousmaneo avatar Jul 19 '22 09:07 ousmaneo

Screenshot 2022-07-25 at 14 29 05

It will be good to adjust the height of the menu to the number of users that we can avoid having the extra useless space.

gally47 avatar Jul 25 '22 12:07 gally47

I took another look at this PR. When I do a search, even with very few users (under 20) I get the same user twice in the list:

Screenshot 2022-08-24 at 14 41 12

mnin avatar Aug 24 '22 12:08 mnin