[Feat]: Adding Lazy Loading component for improving performance of application.

[WaderManasi]

Describe the solution you'd like

• We can render the components only when the user requests for it. (initial loading time will get reduced)
• React Loader can be added.

Are you willing to contribute to this issue? [Yes/No] Yes, being part of gssoc'21

[Vishv07]

As of now, we have very few components, what I mean by that is we have the main panel is room. so anyway the moment the user step into the room, all components has to be loaded. so it's doable but I think it won't reduce the loading time as such.

Since vercel is very quick and our landing page isn't taking much time but still Lazy Loading can be done after all its your call @kothariji

[kothariji]

Hi @WaderManasi, First of all, thank you so much for taking out the time to create this issue.

Oh Yes, actually I analyzed the initial loading time of Sytaxmeets, and on the initial render, all the components are imported(this is the normal behavior, as we write import statements directly).

And this is affecting the performance of our application.

So for now we can use Lazy( ) in App.js for React-Routers so that SyntaxRooms is only called when someone joins the room.

So @Vishv07, I think we are good to go with the lazy import of big components, which will improve performance. What say @Vishv07 ?

Definitely 🙌, Please go forward to work on this issue. I am assigning this Issue to you 👍

And last but not least, Keep Contributing 🙏🔥

[Vishv07]

@kothariji Yes, we can reduce the initial loading time. let @WaderManasi give it a shot and then we will compare it.

[kothariji]

Old Performance

New Performance

Great Work @WaderManasi 🙌

thank you so much for your contributions 🔥

[WaderManasi]

Thank you 🙌!