code/cl8y-dex-terraclassic

Fork 0

W13-C1: Blank page flash on hard reload — no loading skeleton, LCP 29.74s (poor) #179

New issue

Closed

opened 2026-05-21 14:59:22 +00:00 by totdking · 13 comments

totdking commented

2026-05-21 14:59:22 +00:00

(Migrated from gitlab.com)

No description provided.

totdking commented

2026-05-21 15:01:10 +00:00

(Migrated from gitlab.com)

Issue Summary

On a hard reload of the trade page, the browser shows a completely blank white page before any UI appears. There is no skeleton, spinner, or loading indicator of any kind. The page only becomes visible after all assets finish loading. Chrome Lighthouse measures the Largest Contentful Paint (LCP) at 29.74 seconds, which is in the "poor" category (Google threshold: under 4s is good). The LCP element identified by Lighthouse is p.app-legal-footer-notice — the legal footer text at the bottom of the page — which means the browser considers the page "loaded" when the footer renders, not when the chart or order book appears. This indicates the main trading content is not painting in the correct order.

Reproduction Steps

Open the trade page at a valid pair, e.g. http://localhost:3000/trade/terra146ypndztcmmrmyxef7e20cul82gh43vjnw4uacwdvg5sp9kva7sqc9mjav
Press Cmd+Shift+R (hard reload, clears cache)
Watch the screen from the moment the reload starts
Observe whether a skeleton or spinner appears immediately, or whether the page is blank until fully loaded

Expected Behavior

A loading skeleton or spinner should appear within ~200ms of the reload starting. The main content area (chart, order book, order ticket) should progressively fill in as data loads. LCP should be under 4 seconds.

Actual Behavior

Blank white page shown from reload until all assets finish loading
No skeleton, spinner, or placeholder visible at any point during load
LCP: 29.74s (poor)
LCP element: p.app-legal-footer-notice (footer text, not main trading content)
Approximately 199 network requests fire on a single page load

Environment Details

Field	Value
OS	macOS (Apple M1 Pro, 14-inch)
Browser	Google Chrome 148 (desktop)
Viewport	~1440px desktop
Network	`localterra` (local Docker)
Frontend	`VITE_NETWORK=local npm run dev` at `localhost:3000`

How to Verify When Fixed

Open the trade page on the fixed build
Press Cmd+Shift+R (hard reload)
Eyeball check: Does a skeleton or spinner appear immediately, before the chart and book load? If yes, that part is fixed
Open DevTools → Lighthouse tab → click Analyze page load → wait for the report
Check the LCP value in the report
Pass: LCP is under 4s AND a loading skeleton is visible on reload
Fail: LCP is still above 4s OR the page still goes blank on reload

Severity / Impact

P2 Performance. A 29.74s LCP and blank page on reload give a poor first impression, especially for a trading interface where CEX migrants expect a fast, responsive UI. Found under W13-C1 (Performance — initial load / code-split boundaries).

cc: @PlasticDigits

### Issue Summary On a hard reload of the trade page, the browser shows a completely blank white page before any UI appears. There is no skeleton, spinner, or loading indicator of any kind. The page only becomes visible after all assets finish loading. Chrome Lighthouse measures the Largest Contentful Paint (LCP) at **29.74 seconds**, which is in the "poor" category (Google threshold: under 4s is good). The LCP element identified by Lighthouse is `p.app-legal-footer-notice` — the legal footer text at the bottom of the page — which means the browser considers the page "loaded" when the footer renders, not when the chart or order book appears. This indicates the main trading content is not painting in the correct order. --- ### Reproduction Steps 1. Open the trade page at a valid pair, e.g. `http://localhost:3000/trade/terra146ypndztcmmrmyxef7e20cul82gh43vjnw4uacwdvg5sp9kva7sqc9mjav` 2. Press `Cmd+Shift+R` (hard reload, clears cache) 3. Watch the screen from the moment the reload starts 4. Observe whether a skeleton or spinner appears immediately, or whether the page is blank until fully loaded --- ### Expected Behavior A loading skeleton or spinner should appear within \~200ms of the reload starting. The main content area (chart, order book, order ticket) should progressively fill in as data loads. LCP should be under 4 seconds. --- ### Actual Behavior - Blank white page shown from reload until all assets finish loading - No skeleton, spinner, or placeholder visible at any point during load - LCP: **29.74s** (poor) - LCP element: `p.app-legal-footer-notice` (footer text, not main trading content) - Approximately 199 network requests fire on a single page load --- ### Environment Details | Field | Value | |-------|-------| | OS | macOS (Apple M1 Pro, 14-inch) | | Browser | Google Chrome 148 (desktop) | | Viewport | \~1440px desktop | | Network | `localterra` (local Docker) | | Frontend | `VITE_NETWORK=local npm run dev` at `localhost:3000` | --- ### How to Verify When Fixed 1. Open the trade page on the fixed build 2. Press `Cmd+Shift+R` (hard reload) 3. **Eyeball check:** Does a skeleton or spinner appear immediately, before the chart and book load? If yes, that part is fixed 4. Open DevTools → **Lighthouse** tab → click **Analyze page load** → wait for the report 5. Check the **LCP** value in the report 6. **Pass:** LCP is under 4s AND a loading skeleton is visible on reload 7. **Fail:** LCP is still above 4s OR the page still goes blank on reload --- ### Severity / Impact **P2 Performance.** A 29.74s LCP and blank page on reload give a poor first impression, especially for a trading interface where CEX migrants expect a fast, responsive UI. Found under **W13-C1** (Performance — initial load / code-split boundaries). cc: @PlasticDigits

totdking commented

2026-05-21 15:04:15 +00:00

(Migrated from gitlab.com)

mentioned in issue #116

PlasticDigits commented

2026-05-22 06:16:11 +00:00

(Migrated from gitlab.com)

mentioned in commit 5ed7429e57

mentioned in commit 5ed7429e578bc1592a4bd0155de89b4d0756e79a

PlasticDigits commented

2026-05-22 06:16:11 +00:00

(Migrated from gitlab.com)

mentioned in commit db7ac3ae6c

mentioned in commit db7ac3ae6c795e723683d957710b5fa2208d3c38

PlasticDigits commented

2026-05-22 06:16:26 +00:00

(Migrated from gitlab.com)

Fix shipped on `main` (`5ed7429`)

Addresses W13-C1 blank white flash on hard reload and poor LCP dominated by .app-legal-footer-notice.

What changed

Pre-React bootstrap — index.html paints #trade-bootstrap-shell on /trade paths before the Vite bundle runs (themed via existing data-theme script).
Route Suspense fallback — /trade routes use TradePageRouteFallback → TradePageWorkspaceSkeleton (data-testid="trade-workspace-skeleton", ~72vh min-height) instead of the generic centered spinner.
Factory pair gate — TradePage shows the same workspace skeleton while allPairs is loading.
Legal footer deferral — Layout renders LegalFooterNotice only after ROUTE_CONTENT_READY_EVENT (lazy page mount), with a 12s failsafe.
Docs / agents — docs/frontend.md § Trade page — initial load / LCP, skills/AGENTS_FRONTEND_TRADE_INITIAL_LOAD.md, cross-links in lazy-chunk and trade-layout playbooks.

Pair-switch loading (#180) and portaled pair menu CLS (#181) remain unchanged; workspace skeleton is mutually exclusive with TradePairSwitchStatus.

Verification checklist

Hard reload /trade/:pairAddr (Cmd+Shift+R) — skeleton or bootstrap shell visible immediately (no blank white viewport)
Skeleton fills chart + book + ticket region (not only a small spinner)
Legal footer notice appears after trade chrome paints (not during initial skeleton)
Lighthouse LCP < 4s on local/staging build; LCP element is not p.app-legal-footer-notice
Progressive fill: pair selector → chart / book / ticket as data arrives
Unit: npm run test:unit in frontend-dapp (529 tests)
E2E (LocalTerra + indexer): npx playwright test e2e/trade-page-initial-load.spec.ts --workers=5

@totdking — please verify on your M1 / Chrome setup per the issue repro steps and close when satisfied. Leaving the issue open until sign-off.

/cc @PlasticDigits

## Fix shipped on `main` (5ed7429) Addresses **W13-C1** blank white flash on hard reload and poor LCP dominated by `.app-legal-footer-notice`. ### What changed 1. **Pre-React bootstrap** — `index.html` paints `#trade-bootstrap-shell` on `/trade` paths before the Vite bundle runs (themed via existing `data-theme` script). 2. **Route Suspense fallback** — `/trade` routes use `TradePageRouteFallback` → `TradePageWorkspaceSkeleton` (`data-testid="trade-workspace-skeleton"`, ~72vh min-height) instead of the generic centered spinner. 3. **Factory pair gate** — `TradePage` shows the same workspace skeleton while `allPairs` is loading. 4. **Legal footer deferral** — `Layout` renders `LegalFooterNotice` only after `ROUTE_CONTENT_READY_EVENT` (lazy page mount), with a 12s failsafe. 5. **Docs / agents** — docs/frontend.md § Trade page — initial load / LCP, skills/AGENTS_FRONTEND_TRADE_INITIAL_LOAD.md, cross-links in lazy-chunk and trade-layout playbooks. Pair-switch loading (#180) and portaled pair menu CLS (#181) remain unchanged; workspace skeleton is mutually exclusive with `TradePairSwitchStatus`. ### Verification checklist - [ ] Hard reload `/trade/:pairAddr` (`Cmd+Shift+R`) — skeleton or bootstrap shell visible **immediately** (no blank white viewport) - [ ] Skeleton fills chart + book + ticket region (not only a small spinner) - [ ] Legal footer notice appears **after** trade chrome paints (not during initial skeleton) - [ ] Lighthouse **LCP** < 4s on local/staging build; LCP element is **not** `p.app-legal-footer-notice` - [ ] Progressive fill: pair selector → chart / book / ticket as data arrives - [ ] Unit: `npm run test:unit` in `frontend-dapp` (529 tests) - [ ] E2E (LocalTerra + indexer): `npx playwright test e2e/trade-page-initial-load.spec.ts --workers=5` @totdking — please verify on your M1 / Chrome setup per the issue repro steps and close when satisfied. Leaving the issue **open** until sign-off. /cc @PlasticDigits

PlasticDigits commented

2026-05-25 02:10:06 +00:00

(Migrated from gitlab.com)

mentioned in issue #138

Brouie commented

2026-05-25 07:59:29 +00:00

(Migrated from gitlab.com)

qa cleared source+test layer @PlasticDigits

verified 5ed7429e is on main.

Full unit suite: 575/580 PASS. All #179-related cases green:

TradePage.test.tsx 12/12 (workspace skeleton mount + factory pair gate)
TradePageWorkspaceSkeleton.test.tsx 3/3
RouteContentReadyContext.test.tsx 3/3 (legal footer deferral signal)
LazyRoute.test.tsx 3/3 (route Suspense fallback)
LcdQueryGate.test.tsx 3/3

5 fails are unrelated to this issue: 2x #184 terraExplorer env-fragility (already flagged), 2x #127 cosmes patch-package not applied on this QA box (worth a separate ping), 1x #117 prod-build test polluted by a stray VITE_DEV_MNEMONIC in my .env.local (cleaned).

Hard-reload skeleton eyeball + Lighthouse LCP + Playwright e2e deferred to @totdking on his M1 / Chrome setup per your note above.

good to close pending @totdking sign-off.

qa cleared source+test layer @PlasticDigits verified `5ed7429e` is on main. Full unit suite: 575/580 PASS. All #179-related cases green: - TradePage.test.tsx 12/12 (workspace skeleton mount + factory pair gate) - TradePageWorkspaceSkeleton.test.tsx 3/3 - RouteContentReadyContext.test.tsx 3/3 (legal footer deferral signal) - LazyRoute.test.tsx 3/3 (route Suspense fallback) - LcdQueryGate.test.tsx 3/3 5 fails are unrelated to this issue: 2x #184 terraExplorer env-fragility (already flagged), 2x #127 cosmes patch-package not applied on this QA box (worth a separate ping), 1x #117 prod-build test polluted by a stray VITE_DEV_MNEMONIC in my .env.local (cleaned). Hard-reload skeleton eyeball + Lighthouse LCP + Playwright e2e deferred to @totdking on his M1 / Chrome setup per your note above. good to close pending @totdking sign-off.

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-05-27 06:27:24 +00:00

PlasticDigits commented

2026-06-06 08:15:55 +00:00

(Migrated from gitlab.com)

mentioned in merge request !829