Fix #4478 : Added lazy loading to the All Challenges page

[PrasadCodesML]

This PR fixes the all challenges page by loading content using lazy loading method as mentioned in the issue #4478

https://github.com/user-attachments/assets/3fe25dc3-4346-4e03-951a-691c8fb524c3

Changes After Adding Lazy Loading are as follows

1. frontend/src/views/web/challenge-list.html

1. getAllResults(parameters, challengeList, noneFlag, paginationType)

• Core function that makes API requests to fetch challenge data
• Handles pagination, data processing, and populating challenge lists
• Manages loading states and error handling

2. initializeChallenges()

• Initializes all three challenge types (current, upcoming, past)
• Sets up sequential loading for better performance
• Called immediately when the controller is initialized

3. initScrollListener()

• Implements infinite scrolling functionality
• Detects when user approaches the bottom of the page
• Loads more challenges based on which section is currently visible

4. checkVisibility()

• Monitors which challenge sections are currently visible in the viewport
• Initializes data loading for sections as they come into view
• Improves performance by only loading data when needed

Scroll Event Listener for Lazy Loading

• Added an infinite scrolling mechanism to load more challenges dynamically.

2. frontend/src/js/controllers/challengeListCtrl.js

New imageLoaded Method Added

• Added a function to handle lazy loading when images load completely.

Lazy Loading Optimization

• Instead of loading all images at once, only images visible in the viewport are loaded dynamically.

Pagination Logic Modified

• Updated the logic to track when more items need to be loaded and load them when scrolling.
• Integrated with the loadMore() function.

3. frontend\tests\controllers-test\challengeListCtrl.test.js

Updated the tests folder for proper build changed

1. utilities.sendRequest
2. Changed utilities.sendRequest mock logic
3. Improved getAllResults recursion test
4. Ensured utilities.getData() and utilities.storeData() are properly mocked

The above code is doing visbility based loading that is why there are some factor to consider initially all the ongoing, upcoming and past challenges div's are visible on the screen which will make a api call and fetch the challenge data but since initially all the 3 are visible it will load the fastest to fetch api first, even though i have included a function to loadSequentially() but the api calling speed of past and upcoming functions are fast as compared to the ongoing function so sometimes it might happen some of the past challenges are being loaded. However, this can be fixed by increasing the visibility time in checkVisibility() but if there are no ongoing challenges it will take more time to load the upcoming and past challenges.

One of the solution to this problem can be introducing 3 tabs on the All challenges page to top right by clicking on that particular time(ongoing, upcoming or past) we can load challenges accordingly.

Let me know if any changes are need, or if you prefer to solve the problem in a different way...

[chiruu12]

@PrasadCodesML hey! I was working on the issue please make sure you communicate with others too next time.

[RishabhJain2018]

Hey @PrasadCodesML , Can you please fix the travis build?

[PrasadCodesML]

Hey @PrasadCodesML , Can you please fix the travis build?

Yes working on it.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 46.91358% with 86 lines in your changes missing coverage. Please review.

Project coverage is 67.98%. Comparing base (96968d6) to head (5a2c973). Report is 1132 commits behind head on master.

Files with missing lines	Patch %	Lines
frontend/src/js/controllers/challengeListCtrl.js	46.91%	86 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4484      +/-   ##
==========================================
- Coverage   72.93%   67.98%   -4.95%     
==========================================
  Files          83       20      -63     
  Lines        5368     3692    -1676     
==========================================
- Hits         3915     2510    -1405     
+ Misses       1453     1182     -271     

Files with missing lines	Coverage Δ
frontend/src/js/controllers/challengeListCtrl.js	51.63% <46.91%> (-43.06%)	:arrow_down:

... and 64 files with indirect coverage changes

Files with missing lines	Coverage Δ
frontend/src/js/controllers/challengeListCtrl.js	51.63% <46.91%> (-43.06%)	:arrow_down:

... and 64 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update c194f5e...5a2c973. Read the comment docs.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[PrasadCodesML]

Hey @PrasadCodesML , Can you please fix the travis build?

Hey, @RishabhJain2018 the Travis build is fixed

[PrasadCodesML]

A couple of questions:

1. Why are we using pagination?
2. There are some changes like adding the loader, modifying css, etc. Why are those needed?
3. Can we use any library to implement lazy-loading?
4. Can you populate the database with a couple of more challenges, and then show the network tab from the Google Developer console? I am not sure if the challenges are loaded according to the viewport.

Why are we using pagination? Pagination is essential here because it reduces initial payload size and breaks content into manageable chunks

Why are loaders and CSS modifications needed? These UX elements are crucial because without loaders, users have no indication if data is loading or if something failed, layout shifts during loading create a jarring experience

Can we use lazy-loading libraries? It tried using angular's built in lazy loading library but there were too many complex dependency issues because of older version of Angular, The current scroll-based implementation, while not ideal, is more compatible with the existing architecture.

Can you populate the database with a couple of more challenges, and then show the network tab from the Google Developer console? I am not sure if the challenges are loaded according to the viewport. Yes, i will work on this.