[Enhancement] Add loading skeletons and empty-state UI for smoother user experience

[jamunatg2006-sys]

Problem

Currently, some frontend sections directly switch between loading and loaded states without providing visual feedback to users. This can create abrupt UI transitions and make the application feel less responsive, especially during slower API responses or data fetching.

Additionally, empty data states may not provide meaningful guidance or visual consistency.

Proposed Solution

Improve the frontend user experience by introducing:

• loading skeleton components/placeholders
• consistent empty-state UI
• smoother loading transitions
• reusable loading patterns across components

Planned Improvements

• Add skeleton loaders for cards/profile sections/data components
• Create clean empty-state messages when no data is available
• Maintain responsive and consistent UI styling
• Reuse loading components to reduce duplication
• Improve perceived application responsiveness

Expected Outcome

• Better user experience during API/data loading
• More polished frontend behavior
• Cleaner and more scalable UI state management
• Improved visual consistency across pages

Possible Areas Affected

• Dashboard/profile components
• Card rendering sections
• API-fetching frontend components
• Shared UI/loading components

I would like to work on this enhancement under GSSoC'26. Please assign it to me.

[ShantKhatri]

Hi @jamunatg2006-sys Thanks for creating this issue. Are you open to take it?

[jamunatg2006-sys]

Hi @ShantKhatri , Thank you for Assigning this to me ,I am working on this Issue Already,I will soon sort this out and create a PR