Add Smooth Page Transitions and Loading States with Fade-In Animations

[sks-007]

Description

Currently, page navigation in CodeLens happens instantly without any transition or loading feedback. This can make the experience feel abrupt, especially on slower networks or while rendering larger pages.

Problems

• No transition animations between routes
• No loading indicator while pages are rendering
• No skeleton placeholders for data-heavy sections
• Users may think the page is frozen or broken during loading

Proposed Solution

Improve the overall navigation experience by adding smooth page transitions and global loading states across the platform.

Planned Improvements

• Add lightweight fade-in animations for route changes
• Implement a global loading overlay using React Context
• Add skeleton loaders for Dashboard, Profile, and Explore pages
• Prevent layout shifts using Tailwind animate-pulse
• Ensure responsiveness across mobile and desktop devices
• Maintain the existing brutalist black-and-white design style

Acceptance Criteria

• Smooth fade-in transition on route changes
• Global loading state works across pages
• Skeleton loaders added to major pages
• No noticeable layout shift during loading
• Fully responsive implementation
• No rounded corners or colorful UI elements

[anish27863]

Navigation UX Fix Summary

I improved route navigation feedback across the frontend by adding:

• A global loading overlay powered by React Context, shown during route changes.
• A fade-in route transition wrapper so page switches feel smooth instead of abrupt.
• Skeleton loaders for major pages: Dashboard, Account Center (Profile), and Explore.
• Layout-stable placeholders using animate-pulse to reduce visual jumps while loading.

All new UI follows the existing responsive brutalist black-and-white style (no rounded or colorful elements).

[24211a05q8-hue]

Hi @kunalverma2512
I’m a GSSoC’26 contributor and would like to work on this issue.

My plan:

• Add smooth fade-in transitions between routes
• Implement a global loading overlay using React Context
• Add responsive skeleton loaders for Dashboard, Profile, and Explore pages
• Prevent layout shifts using Tailwind animate-pulse
• Maintain the existing brutalist black-and-white UI style
• Ensure smooth performance across desktop and mobile devices

Please assign this issue to me if it is available. Thank you!

[palakjaiswal16]

Hi @kunalverma2512,

I’d like to work on this issue under GSSoC’26 if it is still available.

I understand the goal is to improve navigation feedback with smooth route fade-in transitions, a global loading state, and skeleton placeholders for Dashboard, Profile, and Explore pages while preserving the existing brutalist black-and-white design style.

I noticed there is already a related PR (#78) mentioned for this feature, so I’d be happy to help with any remaining fixes, review feedback, or follow-up improvements if needed.

Thanks!

[kunalverma2512]

@palakjaiswal16 you can always come up with your PR without asking

best one will be merged

Looking for the contribution

[Rati-Akela]

Hi @kunalverma2512 , I’d like to work on this issue under GSSoC 2026.

[Srushti-Kamble14]

Hi , I would like to work on this issue . Please assign it to me

[rajesh-puripanda]

Hi @kunalverma2512! I love the competitive format
am rolling up my sleeves and opening an optimized Pull Request for this immediately under GSSoC'26.

To perfectly match CodeLens’s strict black-and-white brutalist aesthetic, we should avoid heavy layout-animation dependencies like Framer Motion, which introduce bundle bloat and runtime overhead. Instead, I am implementing a high-performance, native approach:

My Engineering & Design Strategy:
Hardware-Accelerated Transitions: I will implement route fade-in transitions utilizing raw CSS @Keyframes tied directly to a lightweight React routing wrapper. Using opacity and hardware-accelerated 2D transforms (transform: translate3d(0,0,0)) ensures smooth transitions that keep main-thread execution at a flat 0ms.

Zero-CLS Brutalist Skeletons: A common issue with basic loading overlays is that they cause jarring Cumulative Layout Shifts (CLS) when data hydrates. I will build layout-stable skeleton structures utilizing Tailwind's raw animate-pulse. In keeping with the brutalist rulebook, these will feature crisp #000000 sharp borders, zero rounded corners (rounded-none), and rigid grid layouts.

Optimized React Context Lifecycle: The global loading context will be heavily throttled. If a page components loads faster than 150ms on fast networks, the loading state will skip rendering entirely, preventing that annoying "flash of loading state" that ruins premium user experiences.

My workspace is set up and I am pushing a highly clean, production-ready PR to completely crush the open requirements right now!