Add Skeleton Loaders

[yash-pouranik]

🌟 [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:

1. Navigate to the frontend/src directory.
2. Identify areas where data fetching occurs and basic loading states are used (e.g., fetching a list of projects on the dashboard).
3. Create a reusable <SkeletonLoader /> component (you can leverage Tailwind CSS which is already configured in the project).
4. 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:

1. Comment on this issue to get it assigned to you.
2. Fork the repository and create a new branch (e.g., feat/skeleton-loaders).
3. Make your changes and test them locally.
4. Submit a Pull Request (PR) and mention this issue (e.g., Fixes #ISSUE_NUMBER).

📚 Resources:

• Tailwind CSS Pulse Animation
• React Suspense / Loading States

If you need any help, feel free to ask in this thread or join our Discord! 🚀

[jpsoaresXy]

Hello, can I help with this?

[yash-pouranik]

Hii @jpsoaresXy
I hope you have read the Issue description
So, Right now skeleton loaders are missing on this pages as i can see

• Project Overview page (When you open a project)
• Auth Page (Inside project)
• Storage Page
• Settings Page as well
• Change Log Page - Here

If you find more pages with out skeleton loader or think it should there, then u can add them too in the bucket.
Let me know if anything else?

[jpsoaresXy]

Sure, I will start working on it. Thank you

[yash-pouranik]

Sure, I will start working on it. Thank you

I should give it to someone else? @jpsoaresXy

[jpsoaresXy]

Hi, sorry for the delay. I had a problem, but I'll complete this issue today.

Sorry, again @yash-pouranik

[yash-pouranik]

Hi, sorry for the delay. I had a problem, but I'll complete this issue today.

Sorry, again @yash-pouranik

Ok no issue, before starting please sync your fork with new changes.