fix(openchallenges): fix bugs related search dropdown filters on search page

rrchai commented 1 month ago

fixes #2648

Changelogs

Add flag to enable/disable loader animation
- Disable the loader animation by default to avoid showing placeholders when scrolling to the data already loaded.
Enable to dynamic set height based on two inputs: # of options (pageSize), and height of each option, so it will always show all options from the first page.
Fixed the "empty" bug: #2648
- If there are selected values for dropdown filter in URL params, retrieve and append the selected values to the top of items
- If the selected value(s) in URL params is invalid, it will be ignored.
Fixed a bug that the selected values are not shown in the UI when the search terms change, instead it will show "empty".

Preview

Disable loader animation

While the loading animation looks nice, a flickering behavior has been observed (see @tschaffter's message below), which is why this PR hides the animation.

Before	After

Fix empty labels

Before	After

b) Invalid selected values

Before	After

Fix selected values not shown in UI

The selected values, if present, will always sit on the top of options, unless the values are unselected and reset by changing search term.	Before	After

rrchai commented 1 month ago

@tschaffter I am not sure if the changes in this pr will fix the flicking issue you encountered 🍀

tschaffter commented 1 month ago

Yes, enabling the loading animation still leads to a flickering. See another video below where I scroll 4 times. The first scroll is fine, but the next three scrolls feature a flickering. Tested on Firefox.

Recording 2024-05-23 at 14 26 55

rrchai commented 1 month ago

Yes, enabling the loading animation still leads to a flickering. See another video below where I scroll 4 times. The first scroll is fine, but the next three scrolls feature a flickering. Tested on Firefox.

If we disable loading animation, does the flickering behavior still exist? @tschaffter