search

Innovateninjas / Paws-frontend

A fast responsive webapp that allows you to report injured stray animals to the nearest NGOs.
https://pawss.vercel.app
GNU General Public License v3.0
62 stars 100 forks source link

💡[FEATURE]: Add Preloader #497

Closed AsmitaMishra24 closed 20 hours ago

AsmitaMishra24 commented 3 weeks ago

Is your feature request related to a problem? Please describe. Yes, the absence of a preloader can lead to a poor user experience as users may not understand whether the application is working or not while content is being loaded. This can cause frustration and potentially lead to users abandoning the application. A preloader helps to keep users engaged by providing a visual indication that content is loading.

Describe the solution you'd like 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.

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

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.

Describe alternatives you've considered

  1. Skeleton Screens: Instead of a preloader animation, skeleton screens can be used to display a placeholder for content that is loading. This approach can be less distracting and provide a more seamless experience.
  2. Progress Bars: Another alternative is to use a progress bar that shows the percentage of content loaded. This can provide more detailed feedback to users about the loading process.
  3. Lazy Loading Indicators: For sections of content that load as the user scrolls, implementing lazy loading indicators can also serve as an alternative to a full preloader.

Additional context My Previous Work:- https://github.com/Innovateninjas/Paws-frontend/assets/146121869/1bfea191-a76d-467c-8704-2807a0aab031

github-actions[bot] commented 3 weeks ago

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

codewarnab commented 3 weeks ago

thank you for adding detail description you can add loader in the website during the initiaal load of the website it takes time to load so you can show loader during that time it must be dynamic

AsmitaMishra24 commented 3 weeks ago

thank you for adding detail description you can add loader in the website during the initiaal load of the website it takes time to load so you can show loader during that time it must be dynamic

Sure....I will add a loader to work during the initial load

AsmitaMishra24 commented 3 weeks ago

Please assign me this issue @codewarnab

AsmitaMishra24 commented 1 week ago

@codewarnab,I added a preloader for the initial loading. Should I add it to all the pages or just for the initial loading?

https://github.com/Innovateninjas/Paws-frontend/assets/146121869/1cefd7af-d464-4fa5-9d03-ca536283e1b7

codewarnab commented 1 week ago

just for intial load