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

[rrchai]

• fixes [Bug] search dropdown filter UI shows "empty"  #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: [Bug] search dropdown filter UI shows "empty"  #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]

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

[tschaffter]

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.

[rrchai]

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

[sonarqubecloud]

Quality Gate passed for 'openchallenges-app'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
No data about Duplication

See analysis details on SonarCloud