[UX]: Add skeleton loading states for the Profile and Roadmap pages

[Aditya948351]

Currently, while Firebase data is being fetched, users often see a blank screen or a very basic spinner which can cause layout shifts. We need to implement sleek, animated skeleton loaders using Tailwind CSS pulse utilities for the DevCard, Roadmap nodes, and Profile sections so the UI feels fast and responsive during network delays.

[Shirivarshini]

Hi @Aditya948351 , I'd like to work on this issue as part of GSSoC'26. Could you please assign it to me?

[pari7maheshwari]

Hi @Aditya948351 ,

I'd like to work on this issue under GSSoC'26.

Proposed Approach

• Review the current loading states in the DevCard, Roadmap, and Profile sections to identify where data is fetched from Firebase and where blank screens or simple spinners are currently displayed.
• Create reusable skeleton loader components using Tailwind CSS animate-pulse utilities.
• Design skeleton placeholders that closely match the structure of the actual content to reduce layout shifts during loading.
• Replace existing loading indicators with the new skeleton components in the relevant sections while preserving the current data-fetching logic.
• Ensure the skeleton loaders are responsive and visually consistent with the application's design system.
• Test the loading experience under slow network conditions to verify smooth transitions from skeleton state to loaded content.

This will improve perceived performance and provide a more polished user experience during Firebase data loading.

Could you please assign this issue to me? Thank you!

[karuna-1]

Hi @Aditya948351 ,

I would like to work on this issue under GSSoC 2026.

I have gone through the requirements and plan to add skeleton loading states for the Profile and Roadmap pages to improve the user experience during data fetching.

Could you please assign this issue to me?

Thank you!

[virakshi07]

/assign

Hello Maintainers 👋

I would like to work on this issue under GSSoC'26.

Understanding of the Issue

Currently, when Firebase data is being fetched on the Profile and Roadmap pages, users may experience:

• Blank screens before content loads.
• Generic loading spinners that provide little context.
• Noticeable layout shifts when data arrives.
• A perception of slower application performance.
• Inconsistent loading experiences across pages.

To improve both UX and perceived performance, I propose implementing animated skeleton loading states that closely match the final UI structure. This will provide users with immediate visual feedback and maintain layout stability while data is loading.

---

Detailed Implementation Plan

Phase 1: Analyze Existing Loading Flow

• Review Profile and Roadmap page components.
• Identify all Firebase data fetching points.
• Locate current loading states, spinners, and conditional rendering logic.
• Understand component hierarchy and loading dependencies.

Phase 2: Design Skeleton Structure

Create skeleton placeholders that mirror the final UI layout rather than using generic loaders.

Profile Page Skeletons

• User profile header
• Avatar/Profile image placeholder
• Username and metadata placeholders
• Statistics cards
• Profile information sections
• Developer card (DevCard)
• Skill and activity sections

Roadmap Page Skeletons

• Roadmap header
• Progress indicators
• Roadmap node cards
• Learning path sections
• Milestone and status components

This ensures users see a realistic preview of the content structure while data loads.

---

Phase 3: Skeleton Component Development

• Create reusable skeleton components for common UI patterns.

• Use Tailwind CSS utilities for:

  • Pulse animations
  • Consistent sizing
  • Responsive layouts

• Keep components modular for future reuse across the application.

Phase 4: Integrate with Loading States

• Replace blank screens and basic loaders with skeleton placeholders.
• Display skeletons only while Firebase requests are pending.
• Seamlessly transition from skeleton state to actual content after data retrieval.
• Ensure no flickering occurs during rendering.

Phase 5: Prevent Layout Shifts

• Match skeleton dimensions closely to actual content.

• Reserve space for:

  • Images
  • Cards
  • Text blocks
  • Roadmap nodes

• Minimize cumulative layout shift (CLS) and improve visual stability.

Phase 6: Animation & UX Enhancements

• Implement smooth pulse animations using Tailwind CSS.
• Ensure animations remain subtle and lightweight.
• Maintain consistency with the application's existing design language.
• Avoid distracting effects that may impact usability.

Phase 7: Responsive Optimization

• Test skeleton layouts across:

  • Desktop
  • Tablet
  • Mobile devices

• Ensure placeholders adapt correctly to different screen sizes.

• Preserve responsive behavior of the final components.

Phase 8: Accessibility & Performance Review

• Verify skeletons do not interfere with accessibility tools.
• Ensure loading states remain performant even on slower devices.
• Avoid unnecessary re-renders during loading.
• Maintain smooth scrolling and interactions.

Phase 9: Testing & Validation

• Test with:

  • Fast network conditions
  • Slow network conditions
  • Delayed Firebase responses

• Verify:

  • Smooth transitions
  • No layout jumping
  • Correct skeleton visibility
  • Proper rendering after data loads

• Confirm existing functionality remains unaffected.

---

Expected Outcome

✅ No blank screens during data fetching

✅ Improved perceived loading speed

✅ Reduced layout shifts and visual jumping

✅ More polished and professional user experience

✅ Consistent loading behavior across Profile and Roadmap pages

✅ Reusable skeleton components for future development

✅ Fully responsive implementation

✅ No changes to existing functionality or data flow

I have experience working with React, Tailwind CSS, component-based UI development, and loading state optimization, and I would be happy to contribute this enhancement.

Looking forward to your approval. Thank you! 🚀

[Aditya948351]

@karuna-1 and @pari7maheshwari You both can submit PR for this one, Best and early PR will be given more priority!

@karuna-1 Welcome to the repository, Good Luck for your Contribution Journey ahead!
Do star the repo if not already!

[github-actions]

Hi @karuna-1! We have officially assigned this issue to you. Please start working on it, and good luck with your PR!

ETA: 3 days
Issue will be assigned to another contributor if failed to do so!

[github-actions]

Hi @pari7maheshwari! We have officially assigned this issue to you. Please start working on it, and good luck with your PR!

ETA: 3 days
Issue will be assigned to another contributor if failed to do so!

[karuna-1]

Hi @Aditya948351,

While setting up the project and investigating this issue, I noticed that the repository already contains skeleton loading implementations in several places, including:

• src/app/profile/loading.tsx
• Skeleton loaders in the Profile projects section
• Skeleton loading state in SkillTreeVisualizer.tsx for roadmap nodes

I also found a recent commit:

d9759b2 - feat: add skeleton loading states for Profile (projects, followers, following) and Roadmap pages (#659)

Before proceeding further, could you please clarify whether there are any remaining areas that still need skeleton loading improvements for this issue, or if the issue has already been addressed by recent changes?

Thank you!