search

arpittyagi102 / Humari-Dukan

Humari Dukan is a E-Commerce website using React with Redux and Bootstrap
https://humaridukan.netlify.app/
MIT License
19 stars 27 forks source link

Added preloading to this react.js project #19

Closed Pulkitxm closed 1 year ago

Pulkitxm commented 1 year ago

added the isLoading state and wrapped the content inside the isLoading condition. When the isLoading state is true, the Preloader component will be rendered. Once the loading is complete, the rest of the content, including the Navbar and routes, will be rendered.

https://github.com/arpittyagirocks/Humari-Dukan/assets/65671483/e6c7eb48-4318-4eb1-af69-53519942c109

netlify[bot] commented 1 year ago

Deploy Preview for humaridukan ready!

Name Link
Latest commit 4c82e097f5b89ef82f597efd420121f5f3d42b02
Latest deploy log https://app.netlify.com/sites/humaridukan/deploys/6492c8364dee0b00088dae64
Deploy Preview https://deploy-preview-19--humaridukan.netlify.app/
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Pulkitxm commented 1 year ago

.loader { position: absolute; top: 50%; right: 50%; }

yep already did it

arpittyagi102 commented 1 year ago

.loader { position: absolute; top: 50%; right: 50%; } yep already did it

That actually does not make the object to the center of the page, rather it leaves 50% of page from top and 50% from the right, but exceeding its own height and width, @Pulkitxm If you want to make it truely to center add this :

 .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
arpittyagi102 commented 1 year ago

Thank you for your contribution, it looks amazing 🌟 Please give the repository a star.