Use Virtualized Lists instead of loading all content at once

[Jaagrav]

Description

Currently there are 115 gradients stored in the code and in the future this value would be a lot more, probably 1000, and right now, when somebody loads the website, all the content loads all at once, and already with just 115 gradients, the website freezes for a very tiny amount of time before it becomes interactive. This is because there's a huge amount of content that gets loaded at once which might become heavy for users with not as powerful computers.

Steps to reproduce the behavior:

Just visit the website

Expected behavior

The website loads immediately without freezing at the first place, this is important to have a good UX.

Desktop (please complete the following information):

• OS: Windows 10 Home
• Browser: Brave (Chromium based)

Solution

The solution to this issue would be to use react-virtualized, which allows us to only load the content that is in users' reach/view. It hence loads the latter gradients as the user scrolls through the website. This will not only make the UX better by loading the website and making it interactive faster but it will also make it easy for us to load a huge amount of content in the future without the website freezing.

PageSpeed Insights

As you can see in the above image, time to interactive is 1.2s which is pretty good, but still slow considering there's only 115 gradients to load, this might vary on other computers.

Further on, it's worse on mobiles with 115 gradients takes 7.6s to load (may vary on different phones),

[saviomartin]

This looks pretty amazing, glad to see your PR on this. react-virtualized in indeed great, I loved the concept