Large loading times on Projects/Course page

[ArchanRD]

Courses and Projects Page: Longer Load Times

Issue Description

The Courses and Projects pages contain numerous cards that each load content like images, causing the page to take longer to load. This results in delays for users, as they must wait for all the content to load before interacting with elements on the page. This can negatively affect the user experience by increasing wait times.

Steps to Reproduce

1. Navigate to the Courses page.
2. Scroll down to observe the cards loading.

Currently, all the cards load at once, including images, which contributes to the long load times.

Proposed Solution

To improve performance, load a limited number of cards initially (e.g., 5 cards) and add a "Load More" button at the bottom of the page. This ensures that all content isn't loaded at once. In addition to enhancing performance, it will also improve the UI by presenting a cleaner layout.

How It Works

1. Initially, only a few cards will load (e.g., 5 cards), reducing the website's loading time.
2. When the user clicks the Load More button, additional cards (e.g., another 5) will be rendered on the page.

This approach ensures that only a few cards are loaded at a time, decreasing load times and enhancing the overall user experience.

Relevant Screenshot

Below is a reference of what the layout might look like, though further design tweaks can be made as needed.

Tech Stack

This feature can be implemented using plain JavaScript. At this stage, the use of frameworks or libraries is not necessary.

---

Labels

• gssoc-ext
• hacktoberfest
• feature request

---

I would like to work on this issue to improve my skills while enhancing your project.

[vivekvardhan2810]

@ArchanRD make sure to complete this issue within 2 days,

and make sure to join the discord server for further updates and communications.

I will add the hacktoberfest label at PR.

[ArchanRD]

I will try at my fullest to complete on time!