[Feature Request]: Add Preloader

[AsmitaMishra24]

Is there an existing issue for this?

• [X] I have searched the existing issues

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:

1. Users are informed about the progress of loading content, reducing uncertainty and frustration.
2. A preloader keeps users engaged and reassured that the application is functioning correctly.

Improved Perceived Performance:

1. By providing a visual indicator during loading, the perceived performance of the application is improved, making users feel that the application is faster.

User Retention:

1. A smoother loading experience helps in retaining users by preventing them from abandoning the application due to unresponsive or slow-loading screens.

Consistency:

1. A preloader ensures a consistent experience across different parts of the application, especially when loading large components or data-heavy pages.

Customization:

1. Customizable preloaders can be tailored to match the application's design language, providing a cohesive and branded user experience.

Accessibility:

1. An accessible preloader ensures that all users, including those using screen readers, are informed about loading processes, enhancing the inclusivity of the application.

Feedback Loop:

1. Provides immediate feedback to users about ongoing processes, such as form submissions or data fetching, making the application more interactive and responsive to user actions.

Priority

High

Record

• [X] I agree to follow this project's Code of Conduct
• [X] I'm a GSSOC'24 contributor
• [X] I'm willing to provide further clarification or assistance if needed.

[github-actions[bot]]

Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible.

[everly-gif]

Nice idea, make it creative

[Khushi-Pushkar]

Hey @everly-gif pls assign this issue to me

[AsmitaMishra24]

Hey @everly-gif pls assign this issue to me

@Khushi-Pushkar, I am already working on this.

[Khushi-Pushkar]

Hey @everly-gif pls assign this issue to me

@Khushi-Pushkar, I am already working on this.

@AsmitaMishra24 okay I apologize for the confusion. I thought you were inactive since you sent this issue a month ago.

[Agarwalvidu]

@AsmitaMishra24 Any update?

[AsmitaMishra24]

@AsmitaMishra24 Any update?

@Agarwalvidu, I will complete it by Tomorrow's EOD. Here is the design. If any changes are needed, please suggest them.

[Agarwalvidu]

Is this an animation?

[AsmitaMishra24]

Is this an animation?

@Agarwalvidu, Yes

https://github.com/user-attachments/assets/47f8bb64-556c-4e45-9250-290fb59a7a08

[Agarwalvidu]

Ohh it looks so cool! Just a small suggestion, If a white background some distorted shape with shadow will be added behind this animation, it will enhance it. Otherwise it is looking beautiful.

[everly-gif]

What's the update for this