JiyaGupta-cs / ShopNex

React Ecommerce App
https://shopnex.vercel.app
91 stars 188 forks source link

Add Preloader #530

Open AsmitaMishra24 opened 3 months ago

AsmitaMishra24 commented 3 months ago

Issue Description

A preloader is an essential feature for enhancing user experience by indicating the progress of loading content. It helps in keeping the users engaged while the main content is being fetched or rendered. Implementing a preloader can significantly improve the perceived performance of our application.

Steps to Reproduce

Design and Appearance:

  1. A simple and visually appealing animation.
  2. Should match the overall design language of the application.
  3. Customizable options for color, size, and style to fit different themes.

Expected Behavior

Functionality:

  1. Should display during the loading of heavy components or data fetching processes.
  2. Must cover the main content area that is being loaded.
  3. Option to show the preloader globally (entire screen) or locally (specific component).

Actual Behavior

Performance:

  1. Lightweight and optimized to prevent additional load times.
  2. Should not interfere with the loading process of the main content.

Implementation:

  1. Should be implemented as a reusable component.
  2. Easy to integrate with different parts of the application.
  3. Must include appropriate documentation for usage and customization.

Screenshots

https://github.com/JiyaGupta-cs/ShopNex/assets/146121869/e3a877b6-3801-41db-b830-876ba230faa7