Use PreLoader Animation (Already Created) before the Site Loads

[tarunnsingh]

Requirement 👇🏼

Run the index.html to see the various loaders available, under client/src/static/loader/index.html.

Any one of these shall appear before the site loads up.

[hvsio]

would like to take it! Could you assign me? :)

[tarunnsingh]

Sure! Assigned.
Please make sure you are able to run the client side locally (Mentioned in the README).

[stellaharmony]

@tarunnsingh
Is the issue is still open can you assign it to me?

[tarunnsingh]

@mbhole1857 It has been assigned as of now, keep track we have many issues coming in 😀

[hvsio]

sorry I'm not having much time these days, feel free to assign some other person :)

[tarunnsingh]

@mbhole1857 Want to work on this?

[namrataaaa]

Hi, @tarunnsingh I have started working on this issue. I have been able to locally run the app and also use a preLoader provided by react and it all works perfectly. But I know that I am supposed to use the custom animations already created. I have run the index.html file in the loader and there are some really beautiful animations there. But I am having trouble to understand how I am going to use them. I have created a LoaderComponent.js but I don't know what to put in it. So, if you can please guide me on how to use the preloader animation, it would be great.

[tarunnsingh]

Hey @namrataaaa,
I am a bit engaged lately, however animating SVGs in React is a bit tricky. Even I haven't tried it yet.
You could give a PR with the default preLoader functionality as you said. So that at least we would have the components and flow ready.

Then we could later learn and figure out how to animate the SVGs in React properly.
Maybe using Framer Motion could help.
Also see this ✌🏼

[namrataaaa]

@tarunnsingh I went through a lot of resources including the ones you provided. But I still couldn't figure it out. I/m trying and hope to succeed. As you mentioned, I could make a PR using any one of the loaders from here or here. I basically just installed the packages required and imported them in the app. So, please go through the above mentioned two sites and let me know which loader I should use. I can add custom styling to it for making it look better with the colour theme of the website.

[tarunnsingh]

@namrataaaa In this, 4th in the second row looks good! If you could twitch it's color a bit to match with that of the site's logo, then it would be great!.

Also if you could put up another loader before the blog posts section loads, it would be another feature.
I could create a new issue on that and assign that to you?