[feature]: Optimizing Rendering Performance with List Virtualization

[0XYoussefX0]

Is there an existing issue for this feature?

• [X] There is no exsiting issue for this feature

Summary

I noticed that on (https://quran.com/2), the verse list and the surah list are rendering a substantial number of elements. And since this component is a part of every surah page, by improving it you will enhance the performance and user experience of every surah page.

Your purposed solution for this feature

Consider implementing list virtualization for the two lists. This can be achieved by using a virtualization library like : https://tanstack.com/virtual/v3 https://github.com/bvaughn/react-window https://github.com/bvaughn/react-virtualized

Essentially, what the library does is that it will only render the elements that the user is currently seeing. if you want to know more about this technique you can visit this article: https://www.patterns.dev/vanilla/virtual-lists/

Benefits :

• Improved page load times, especially on devices with limited resources.
• Smoother scrolling experience.
• Reduced style calculations.
• Reduced memory usage by rendering only the items currently visible.

[Wajid2001]

It has already virtualized for the verses list and we are using 'react-virtuoso' for that.

So do you want to implement it any way.