search

CodeHarborHub / codeharborhub.github.io

Welcome to CodeHarborHub! Our mission is to provide accessible and comprehensive educational resources to learners of all levels, from beginners to advanced professionals. Whether you're looking to kickstart your career in web development, master a new programming language, or stay updated on the latest tech trends, we've got you covered.
https://codeharborhub.github.io/
MIT License
83 stars 166 forks source link

[Feature Request]: Add Preloader #2614

Closed AsmitaMishra24 closed 1 week ago

AsmitaMishra24 commented 2 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: Scenario: A user opens the application for the first time. Requirement: Display a global preloader covering the entire screen while the initial assets and data are being loaded. Outcome: Users see a visual indicator that the application is loading, reducing uncertainty and improving user experience.

Fetching Data for Dashboard: Scenario: A user navigates to the dashboard which requires fetching data from multiple APIs. Requirement: Show a local preloader in the main content area of the dashboard while the data is being fetched. 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: Scenario: A user clicks on a thumbnail to view a large image or video. Requirement: Display a preloader over the media area until the full image or video is loaded. Outcome: Users see that the media content is loading and are informed of the progress.

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

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

Benefits

No response

Add ScreenShots

https://github.com/CodeHarborHub/codeharborhub.github.io/assets/146121869/25f06227-15fa-465f-8008-4e61fa07b602

Priority

High

Record

github-actions[bot] commented 2 weeks ago

Hi @AsmitaMishra24! 👋 Thank you for opening your first issue on CodeHarborHub. We're excited to hear your thoughts and help you out. You've raised a great topic! Please provide as much detail as you can so we can assist you effectively. Welcome aboard!

github-actions[bot] commented 2 weeks ago

Hi @AsmitaMishra24! Thanks for opening this issue. We appreciate your contribution to this open-source project. Your input is valuable and we aim to respond or assign your issue as soon as possible. Thanks again!

AsmitaMishra24 commented 2 weeks ago

Please add level 2 as for my same issue in other repo I got level 2

github-actions[bot] commented 1 week ago

Hello @AsmitaMishra24! Your issue #2614 has been closed. Thank you for your contribution!