UN-3185: Fix squished route-loading spinner in the content area#2118
Conversation
GenericLoader's .center uses width/height: inherit, which collapsed to a narrow column when used as LazyOutlet's content-area Suspense fallback (the loader text wrapped one word per line beside the sidebar). Wrap the fallback in a full-width, flex-centered .lazyOutletFallback box and pin .center to width:100% so it renders centered at its natural size. The top-level loader in Router.jsx is unaffected (it doesn't use this wrapper).
Frontend Lint Report (Biome)✅ All checks passed! No linting or formatting issues found. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
Summary by CodeRabbit
WalkthroughLazyOutlet now wraps its suspense loader in a styled fallback container and adds CSS that centers the loading state and keeps the loader sized to the container width. ChangesLazyOutlet fallback layout
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning Tools execution failed with the following error: Failed to run tools: 14 UNAVAILABLE: read ECONNRESET Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
| Filename | Overview |
|---|---|
| frontend/src/components/error/LazyOutlet/LazyOutlet.css | New CSS file that introduces .lazyOutletFallback wrapper and overrides .center width/height to fix the squished spinner layout in the content area flex context. |
| frontend/src/components/error/LazyOutlet/LazyOutlet.jsx | Imports the new CSS file and wraps the Suspense fallback's GenericLoader in the .lazyOutletFallback div; no logic changes. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A["PageLayout / FullPageLayout\n(sidebar + content flex container)"] --> B["LazyOutlet"]
B --> C["ErrorBoundary\n(resetKeys: pathname)"]
C --> D["Suspense\nfallback: lazyOutletFallback wrapper"]
D -- loading --> E["div.lazyOutletFallback\n(display:flex; width:100%; min-height:60vh)"]
E --> F["GenericLoader\ndiv.center (width:100% pinned by CSS override)"]
D -- resolved --> G["Outlet\n(lazy route chunk)"]
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A["PageLayout / FullPageLayout\n(sidebar + content flex container)"] --> B["LazyOutlet"]
B --> C["ErrorBoundary\n(resetKeys: pathname)"]
C --> D["Suspense\nfallback: lazyOutletFallback wrapper"]
D -- loading --> E["div.lazyOutletFallback\n(display:flex; width:100%; min-height:60vh)"]
E --> F["GenericLoader\ndiv.center (width:100% pinned by CSS override)"]
D -- resolved --> G["Outlet\n(lazy route chunk)"]
Reviews (1): Last reviewed commit: "UN-3185: Fix squished route-loading spin..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
1 participant
What
Why
LazyOutlet(a content-scoped<Suspense>insidePageLayout/FullPageLayout). Its fallback isGenericLoader, whose root.centeruseswidth/height: inherit(index.css). At the app-level Suspense that inherits the full viewport, but inside the flex content area it collapses to a narrow column, so the loader renders cramped and left-aligned instead of centered.How
.lazyOutletFallbackbox and pin the loader (> .center) towidth: 100%, so it renders centered at its natural size regardless of howinheritresolves in the parent context. The app-level loader inRouter.jsxis untouched (it doesn't use this wrapper).Can this PR break any existing features?
.lazyOutletFallbackclass used solely byLazyOutlet's Suspense fallback. No behavior, routing, or other component is affected.Database Migrations
Env Config
Relevant Docs
Related Issues or PRs
Dependencies Versions
Notes on Testing
npm run buildgreen. Verified in-browser against the loaded stylesheet that.lazyOutletFallback > .centerresolves to the full fallback width (e.g. a 500px fallback yields a 500px.center) instead of tracking theinheritchain, and the loader is flex-centered.Screenshots
Checklist
I have read and understood the Contribution Guidelines.