🌟 [GFI] Add Skeleton Loaders to Improve Frontend UX
Description
Currently, when data is being fetched from the backend (like projects, collections, or user data), the frontend displays standard loading spinners or simple text like "Loading...". To improve the perceived performance and user experience (UX) of the urBackend dashboard, we want to replace these basic indicators with modern Skeleton Loaders.
A Skeleton Loader acts as a wireframe of the page's content, giving users a better idea of what layout is about to appear.
🎯 What needs to be done:
- Navigate to the
frontend/src directory.
- Identify areas where data fetching occurs and basic loading states are used (e.g., fetching a list of projects on the dashboard).
- Create a reusable
<SkeletonLoader /> component (you can leverage Tailwind CSS which is already configured in the project).
- Implement the
<SkeletonLoader /> in place of the current loading indicators.
🛠️ Requirements & Suggestions:
- Ensure the skeleton loaders match the existing theme (dark/light) gracefully.
- You can use standard Tailwind utility classes like
animate-pulse, bg-gray-200, rounded, etc., to build the skeleton.
- Focus on pages like the main Dashboard and Project Settings where data clearly takes a moment to load.
📍 Where to look:
- Look at files under
frontend/src/pages/ and frontend/src/components/ where state like isLoading or loading exist.
💡 How to Contribute:
- Comment on this issue to get it assigned to you.
- Fork the repository and create a new branch (e.g.,
feat/skeleton-loaders).
- Make your changes and test them locally.
- Submit a Pull Request (PR) and mention this issue (e.g.,
Fixes #ISSUE_NUMBER).
📚 Resources:
If you need any help, feel free to ask in this thread or join our Discord! 🚀
🌟 [GFI] Add Skeleton Loaders to Improve Frontend UX
Description
Currently, when data is being fetched from the backend (like projects, collections, or user data), the frontend displays standard loading spinners or simple text like "Loading...". To improve the perceived performance and user experience (UX) of the urBackend dashboard, we want to replace these basic indicators with modern Skeleton Loaders.
A Skeleton Loader acts as a wireframe of the page's content, giving users a better idea of what layout is about to appear.
🎯 What needs to be done:
frontend/srcdirectory.<SkeletonLoader />component (you can leverage Tailwind CSS which is already configured in the project).<SkeletonLoader />in place of the current loading indicators.🛠️ Requirements & Suggestions:
animate-pulse,bg-gray-200,rounded, etc., to build the skeleton.📍 Where to look:
frontend/src/pages/andfrontend/src/components/where state likeisLoadingorloadingexist.💡 How to Contribute:
feat/skeleton-loaders).Fixes #ISSUE_NUMBER).📚 Resources:
If you need any help, feel free to ask in this thread or join our Discord! 🚀