feat(openchallenges): implement lazy loading in searchable dropdown filters on search pages

[rrchai]

• closes #2634

Changelogs

• Enable to dynamically load the data for the searchable dropdown filters ("Input Data Types", "Organization", "Platforms")
  • By default, it will load 25 data initially, and then load next pages as user scroll down
  • The loader animation will be displayed while loading (the data with avatar will have circle loader to match the styles)
• Refactor some codes in challenge search page to make codebase easier to fit in the logics for lazy loading

Preview

---

The bug #2648 is not fixed in this PR, as I think it needs extra backend support, i.e. filter input data types by its ids, which will be saved for another PRs.

[rrchai]

The lazyLoad is enabled in all search dropdown filters, but I need more time to test the behavior when the search term is applied. I will also try to consolidate the multiple lazyLoad functions for different filters into one generic function to reduce codes.

[rrchai]

Currently, when users scroll down the results, it will trigger to query next page results (0...N) with constant page size. The new scrolled results will be appended to the existing results. To avoid duplicated queries, the page number is checked to make sure the same page is only loaded once.

However, when the search term is applied, the pagination of query results are different, which could lead to miss or duplicate results. I am checking ...

[rrchai]

Notes on Managing BehaviorSubject with Object Types

When using a BehaviorSubject to emit objects in RxJS (like debounceTime()), ensure to create a new object when updating the value emitted by a BehaviorSubject:

private platformSearchQuery: BehaviorSubject<ChallengePlatformSearchQuery> =
    new BehaviorSubject<ChallengePlatformSearchQuery>({});

setPlatformSearch(searchQuery: ChallengePlatformSearchQuery) {
    this.platformSearchQuery.next(searchQuery); // No
    this.platformSearchQuery.next({ ...searchQuery }); // Yes
}

[tschaffter]

ensure to create a new object when updating the value emitted by a BehaviorSubject:

Why?

Note that using the spread operator results in a shallow copy of the object. For deep copy, I am using cloneDeep from lodash.

[rrchai]

Why?

Note that using the spread operator results in a shallow copy of the object. For deep copy, I am using cloneDeep from lodash.

If I don't copy or force the change on the object as BehaviorSubject, the debounceTime(400) will not work as expected. Instead of waiting for 400ms, it will trigger the change as soon as I type something in search bar. I didn't look into the exactly reason, but using the spread operator seem to work on my end. I am open to change to deep copy if that's necessary.

[rrchai]

I will try to address two more issues for the search filters before making this pr open:

• [ ] #2648
• [x] As I change to let viewport of dropdown determine the page number of query, the query will not be triggered until the dropdown open up. As a result, it will show "No results found" initially. (not a big deal, but I will try to improve)

[tschaffter]

@rrchai Converting the PR back to draft since I saw that you made new commits. Please turn in back to Ready for review when ready.

[sonarcloud[bot]]

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

[tschaffter]

Further exploration is needed about the flickering. The issue will be fixed in another PR.