[Performance / UI] Global Slow Page Loads and Visible Placeholder Flashes Across All Sub-pages

[Areeb-coder]

[Performance / UI] Global Slow Page Loads and Visible Placeholder Flashes Across All Sub-pages

🚨 Problem Statement

The application suffers from a widespread performance and user experience issue where navigating to any sub-page or route results in a noticeable, multi-second load delay. During this transition period, raw fallback placeholders (such as the text "profile" on the profile view) flash on screen before the actual data hydrates the page. This creates a jarring layout shift and an unpolished feel across the entire platform.

---

🔍 Root Cause Analysis

This global sluggishness and visible layout shifting is typically caused by:

• Blocking Data Fetching (Waterfall Effect): Components wait to fetch critical data sequentially after mounting, stalling the final render. If API responses or database queries are unoptimized, it creates a multi-second bottleneck.
• Lack of Global Routing Loaders: The client-side router changes the URL and mounts the new page component immediately, but because there is no universal loading state, the user is left looking at unpopulated, static fallback HTML.
• Absence of Data Caching: The app appears to rely entirely on fresh client-side fetching without proper caching or initial state hydration, forcing the browser to reconstruct data from scratch on every single route change.

---

🛠️ Steps to Reproduce

1. Log into the application.
2. Click through various main navigation links (e.g., Studio, The Agora, Leaderboard, Profile).
3. Observe that every page transition takes a few seconds to fully render.
4. Note that raw text placeholders or unstyled structures flash briefly on screen before the real content appears.

---

🎯 Expected vs. Actual Behavior

Expected Behavior

Page transitions should feel instantaneous or properly managed. If data fetching takes time:

• A global loading indicator (like a top-screen progress bar or spinner) should trigger.
• Skeleton screens should be used to prevent raw fallback text from rendering prematurely.

Actual Behavior

Every sub-page loads slowly, displaying incomplete layout elements and raw placeholder strings until the backend data resolves.

---

💡 Suggested Solutions

• Implement Global Route Guards/Loaders: Integrate a global routing loader (like nprogress for a top loading bar) that triggers on route change start and completes when data is ready.
• Introduce Caching/State Management: Implement a data-fetching library with built-in caching (e.g., React Query, SWR, or RTK Query) to prevent refetching static data on every page mount.
• Utilize Skeleton Components: Replace hardcoded text fallbacks (like raw "profile" text) with structural skeleton wrappers so the layout remains visually consistent while loading.
• Optimize Backend Performance: Review the database queries, API endpoints, and network payloads to minimize data response times.

Screen.Recording.2026-05-19.152040.mp4

[Priyasha-Yadav]

Hi @Areeb-coder ,

I’d like to work on this performance/UI issue under GSSOC'26.
I’ll investigate the loading flow, placeholder flashes, and route transition behavior to improve the overall user experience.

If I’m unable to make meaningful progress within 7 days, feel free to reassign the issue to another contributor.

Please assign this issue to me. Thanks!