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

PrasadCodesML · 2025-03-17T16:01:13Z

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

Untitled.video.-.Made.with.Clipchamp.2.mp4

Changes After Adding Lazy Loading are as follows

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

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

initializeChallenges()

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

initScrollListener()

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

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

utilities.sendRequest
Changed utilities.sendRequest mock logic
Improved getAllResults recursion test
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 · 2025-03-17T16:29:45Z

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

RishabhJain2018

Hey @PrasadCodesML , Thanks for the PR. Can you please remove the formatting changes to the lines that are not required?

RishabhJain2018 · 2025-03-18T16:20:46Z

frontend/src/js/controllers/challengeListCtrl.js

+            $timeout(vm.checkVisibility, 500);
+        });
+    }
+})();


Please add a new line here.

Yes i will modify those changes

RishabhJain2018 · 2025-03-18T16:21:21Z

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

@@ -1,13 +1,27 @@
 <section class="ev-sm-container ev-view challenge-container">
    <!-- ongoing challenges -->
-    <div class="challenge-page-title" id = "ongoing-challenges"><strong class="text-med-black fs-18">Ongoing Challenges</strong></div>
+    <div class="challenge-page-title" id="ongoing-challenges">


What are we changing here?

RishabhJain2018 · 2025-03-18T16:21:43Z

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

    <div ng-if="challengeList.noneCurrentChallenge">None</div>
    <div class="row">
-        <div class="col s12 m3" ng-repeat="challenge in challengeList.currentList"><a class="ev-card-hover" ui-sref="web.challenge-main.challenge-page({challengeId:challenge.id})">
+        <div class="col s12 m3" ng-repeat="challenge in challengeList.currentList">


What are we changing here?

RishabhJain2018 · 2025-03-18T16:22:28Z

frontend/tests/controllers-test/challengeListCtrl.test.js

    });
-});
+});


Add a new line here.

RishabhJain2018 · 2025-03-22T09:15:58Z

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

PrasadCodesML · 2025-03-22T13:54:54Z

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

Yes working on it.

…rasadCodesML/EvalAI into Fix/Add_lazy_loading_on_challenge_page

codecov · 2025-03-23T16:20:32Z

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 ⚠️

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%)`	⬇️

... and 64 files with indirect coverage changes

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

... 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.

🚀 New features to boost your workflow:

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

PrasadCodesML · 2025-03-23T16:34:58Z

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

Hey, @RishabhJain2018 the Travis build is fixed

gautamjajoo

A couple of questions:

Why are we using pagination?
There are some changes like adding the loader, modifying css, etc. Why are those needed?
Can we use any library to implement lazy-loading?
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.

PrasadCodesML · 2025-03-25T09:17:00Z

A couple of questions:

Why are we using pagination?

There are some changes like adding the loader, modifying css, etc. Why are those needed?

Can we use any library to implement lazy-loading?

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.

PrasadCodesML and others added 2 commits March 17, 2025 21:19

Added lazy loading to the All Challenges page

e8ffa7f

Merge branch 'master' into Fix/Add_lazy_loading_on_challenge_page

1c07213

PrasadCodesML added 4 commits March 17, 2025 22:56

Build fixed

43c0107

build fixed

b9e6e09

build fixed

2e5c97a

frontend\tests\controllers-test\challengeListCtrl changed

e7a92d3

RishabhJain2018 requested changes Mar 18, 2025

View reviewed changes

PrasadCodesML and others added 2 commits March 22, 2025 01:34

the_get_url_changed_in_unit_test

0865b2e

Merge branch 'master' into Fix/Add_lazy_loading_on_challenge_page

abfc5f7

PrasadCodesML and others added 7 commits March 23, 2025 10:08

Fixed get request tests

713bdbe

Merge branch 'Fix/Add_lazy_loading_on_challenge_page' of github.com:P…

f44cc04

…rasadCodesML/EvalAI into Fix/Add_lazy_loading_on_challenge_page

Merge branch 'master' into Fix/Add_lazy_loading_on_challenge_page

6b5fec1

updated_challengeListCtrl.test.js

83ce62d

Merge branch 'Fix/Add_lazy_loading_on_challenge_page' of github.com:P…

068f29f

…rasadCodesML/EvalAI into Fix/Add_lazy_loading_on_challenge_page

build fix

19855e9

build fixed

5a2c973

gautamjajoo reviewed Mar 24, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

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

Uh oh!

PrasadCodesML commented Mar 17, 2025 •

edited

Loading

Uh oh!

chiruu12 commented Mar 17, 2025

Uh oh!

RishabhJain2018 left a comment

Uh oh!

RishabhJain2018 Mar 18, 2025

Uh oh!

PrasadCodesML Mar 18, 2025 •

edited

Loading

Uh oh!

RishabhJain2018 Mar 18, 2025

Uh oh!

RishabhJain2018 Mar 18, 2025

Uh oh!

RishabhJain2018 Mar 18, 2025

Uh oh!

RishabhJain2018 commented Mar 22, 2025

Uh oh!

PrasadCodesML commented Mar 22, 2025

Uh oh!

codecov bot commented Mar 23, 2025 •

edited

Loading

Uh oh!

PrasadCodesML commented Mar 23, 2025

Uh oh!

gautamjajoo left a comment

Uh oh!

PrasadCodesML commented Mar 25, 2025

Uh oh!

Uh oh!

Uh oh!

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

PrasadCodesML commented Mar 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

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

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

Uh oh!

chiruu12 commented Mar 17, 2025

Uh oh!

RishabhJain2018 left a comment

Choose a reason for hiding this comment

Uh oh!

RishabhJain2018 Mar 18, 2025

Choose a reason for hiding this comment

Uh oh!

PrasadCodesML Mar 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

RishabhJain2018 Mar 18, 2025

Choose a reason for hiding this comment

Uh oh!

RishabhJain2018 Mar 18, 2025

Choose a reason for hiding this comment

Uh oh!

RishabhJain2018 Mar 18, 2025

Choose a reason for hiding this comment

Uh oh!

RishabhJain2018 commented Mar 22, 2025

Uh oh!

PrasadCodesML commented Mar 22, 2025

Uh oh!

codecov bot commented Mar 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

PrasadCodesML commented Mar 23, 2025

Uh oh!

gautamjajoo left a comment

Choose a reason for hiding this comment

Uh oh!

PrasadCodesML commented Mar 25, 2025

Uh oh!

Uh oh!

PrasadCodesML commented Mar 17, 2025 •

edited

Loading

PrasadCodesML Mar 18, 2025 •

edited

Loading

codecov bot commented Mar 23, 2025 •

edited

Loading