MAVRICK-1 / e-commerce_website

MIT License
74 stars 123 forks source link

[Feature Request]: Add Preloader #381

Closed AsmitaMishra24 closed 3 weeks ago

AsmitaMishra24 commented 4 weeks ago

Is there an existing issue for this?

Feature 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.

Use Case

Initial Application Load:

  1. Scenario: A user opens the application for the first time.
  2. Requirement: Display a global preloader covering the entire screen while the initial assets and data are being loaded.
  3. Outcome: Users see a visual indicator that the application is loading, reducing uncertainty and improving user experience.

Fetching Data for Dashboard:

  1. Scenario: A user navigates to the dashboard which requires fetching data from multiple APIs.
  2. Requirement: Show a local preloader in the main content area of the dashboard while the data is being fetched.
  3. Outcome: Users are aware that the dashboard data is being loaded and are less likely to think the application is unresponsive.

Loading Large Images or Media Files:

  1. Scenario: A user clicks on a thumbnail to view a large image or video.
  2. Requirement: Display a preloader over the media area until the full image or video is loaded.
  3. Outcome: Users see that the media content is loading and are informed of the progress.

Navigating Between Routes:

  1. Scenario: A user navigates to a different page within the application that requires fetching new content.
  2. Requirement: Show a global or local preloader while the new page content is being loaded.
  3. Outcome: Users are aware that the navigation is in progress and the content is being fetched, improving the navigation experience.

Submitting a Form:

  1. Scenario: A user submits a form that triggers a backend process which takes some time to complete.
  2. Requirement: Display a preloader over the form or a specific section of the page indicating that the submission is being processed.
  3. Outcome: Users receive immediate feedback that their submission is being processed, reducing uncertainty and the likelihood of resubmitting.

Benefits

Enhanced User Experience:

Improved Perceived Performance:

User Retention:

Consistency:

Customization:

Accessibility:

Feedback Loop:

Add ScreenShots

maxresdefault

Priority

High

Record

AsmitaMishra24 commented 4 weeks ago

I would like to work on this issue. Please assign me this task for GSSoC'24.

MAVRICK-1 commented 3 weeks ago

@AsmitaMishra24 we already got a loader not needed