💡[Feature]: Add Preloader

[AsmitaMishra24]

Is there an existing issue for this?

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

Add ScreenShots

My Previous Work:-
https://github.com/BamaCharanChhandogi/Diabetes-Prediction/assets/146121869/8865f3f1-8c34-46f8-a61f-fc65923e462c

preloader.2.mp4

Priority

High

Record

• I have read the Contributing Guidelines
• I'm a GSSOC'24 contributor
• I want to work on this issue

[BamaCharanChhandogi]

Thank you for creating this issue! 🎉 We'll look into it as soon as possible. In the meantime, please make sure to provide all the necessary details and context. If you have any questions or additional information, feel free to add them here. Your contributions are highly appreciated! 😊

You can also check our CONTRIBUTING.md for guidelines on contributing to this project.

[BamaCharanChhandogi]

I think this preloader would make the site slow.