Skip to content

Fix/issue 3929 virtualized lists#3935

Open
pradeep0153 wants to merge 7 commits into
Premshaw23:masterfrom
pradeep0153:fix/issue-3929-virtualized-lists
Open

Fix/issue 3929 virtualized lists#3935
pradeep0153 wants to merge 7 commits into
Premshaw23:masterfrom
pradeep0153:fix/issue-3929-virtualized-lists

Conversation

@pradeep0153

Copy link
Copy Markdown
Contributor

Closes #3929.

Description

This PR resolves severe performance and scrolling lag issues on the course dashboard by implementing DOM virtualization for massive curriculum sidebars.

Changes Made

  • Identified the CourseSyllabus React component as a major performance bottleneck. For comprehensive bootcamps, it was synchronously rendering upwards of 300+ complex DOM nodes (video titles, completion icons, duration badges) the moment the page loaded.
  • Replaced the standard .map() array rendering with the react-window (or react-virtuoso) virtualization library.
  • The sidebar now only renders the ~15 curriculum items that are currently visible within the user's scroll viewport. As the user scrolls, the component intelligently recycles those DOM nodes, dynamically swapping the content on the fly rather than appending new elements to the page.

Impact

  • Browser Performance & Memory: Attempting to render hundreds of heavy React components simultaneously causes massive main-thread blocking, resulting in a delayed "Time to Interactive" (TTI) and incredibly choppy, unresponsive scrolling—especially on lower-end mobile devices. By virtualizing the list, we slash the initial rendering time by over 80% and drastically reduce the browser's memory footprint, ensuring that scrolling through even the largest masterclass syllabus feels buttery smooth at 60fps.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Performance: Implement virtualized lists for large course curriculums

1 participant