Fix: Eliminate layout shift and flickering during navigation

[epodak]

PR Description

Issue Description

When navigating between components (e.g., from /animations/magnet to /animations/blur-text), the entire page exhibits noticeable flickering and layout jitter, degrading user experience. This is caused by layout re-calculation and rendering instability during dynamic component loading.

Solution

This PR eliminates page flickering and layout jitter during navigation by implementing fixed layout containers, GPU acceleration, and optimized component loading processes. This delivers a more professional and seamless user experience.

Changes

1. Improved Component Loading Strategy:

   • Added fixed-height container in CategoryPage.jsx
   • Used absolute positioning for components to avoid layout shifts
   • Enhanced Suspense fallback placeholder component
   • Enforced full component replacement by using path as the key

2. Layout Stability Enhancements:

   • Created StableLayoutWrapper component in App.jsx
   • Implemented fade-in/out effects for smoother transitions
   • Applied absolute positioning to ensure component switching does not affect surrounding layouts

3. CSS Performance Optimization:

   • Added transform: translateZ(0) and will-change: transform to enable GPU acceleration
   • Implemented smooth scrolling and transition effects
   • Set fixed dimensions for component containers

4. Initial Loading Optimization:

   • Added page loading state management in main.jsx
   • Deferred enabling of transition animations to prevent initial render flickering

Testing

1. Run the app locally (npm run dev)
2. Navigate between components via sidebar, especially within animations category
3. Verify no flickering or layout jitter occurs during switching
4. Confirm smooth page scrolling and component loading

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
react-bits-ui	⬜️ Ignored (Inspect)	Visit Preview		Mar 31, 2025 5:03am