[PERF] Defer pattern list rendering to improve speed

[idoqo]

This is for the first Todo item in #286 to make development easier and remove the error from the /patterns page. This is what the patterns page look like now:

[idoqo]

For the deferred rendering, the parent component is rendered first, and the items are added in steps. I tried using the react-window package and while it is faster, it is harder to use with dynamic heights (we need the height to be dynamic when showInfo is true for a single pattern item). Below are the comparisons for 10,000 patterns:

Current master branch (no deferred rendering)

With deferred rendering.

With react-window package

[sashasushko]

@idoqo thanks for pull request. I'll review it at weekend.

[sashasushko]

@idoqo i don't forgot. A lot of work :-(

[idoqo]

@idoqo i don't forgot. A lot of work :-(

😅 Yeah, no problem.

[sashasushko]

@idoqo can you collaborate with @hv7214 about his PR - #292

Did you affect each other?

[idoqo]

@idoqo can you collaborate with @hv7214 about his PR - #292

Yes sure!

[hv7214]

@sashasushko we had a conversation regarding this, there is only one conflicting file PatternList.jsx so let my PR get merged and then @idoqo will solve conflicts accordingly.

[sashasushko]

@hv7214 pull request about sorting was merged. @idoqo your turn

[sashasushko]

@idoqo when you finish please tag me and remove WIP badge.

[idoqo]

@idoqo when you finish please tag me and remove WIP badge.

Okay @sashasushko, it's ready for review now. I don't have the access to remove the WIP badge though.

[idoqo]

Hi @sashasushko, I tried resolving the conflicts between this and master and it affected way more files than I expected. I'm not sure how to resolve that, do you think a new PR would help?