code/cl8y-dex-terraclassic

Fork 0

W13-C2: Pair switch on trade / limit takes 8–10 seconds to fully load — unacceptable latency for a trading interface #180

New issue

Closed

opened 2026-05-21 15:01:59 +00:00 by totdking · 15 comments

totdking commented

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

(Migrated from gitlab.com)

No description provided.

totdking commented

2026-05-21 15:02:35 +00:00

(Migrated from gitlab.com)

Issue Summary

Switching to a different pair using the pair selector takes approximately 8 seconds before the new pair begins to appear, and up to 10 seconds to fully load the chart and order book. Chrome Lighthouse records an Interaction to Next Paint (INP) of 272ms (needs improvement; threshold: under 200ms is good). For a trading interface where CEX migrants expect near-instant market switching, this latency is a significant usability failure.

Reproduction Steps

Open the trade page at a valid pair
Open DevTools → Network tab
Click a different pair in the pair selector
Start a stopwatch from the moment you click
Note how long until the chart and order book show data for the new pair

Expected Behavior

The UI should respond to the pair switch within ~500ms. The chart and order book should begin loading immediately with a visible loading state, and fully resolve within 1–2 seconds on a local environment.

Actual Behavior

~8 seconds before the new pair content begins to appear
~10 seconds until the chart and order book are fully loaded
No loading indicator shown during the wait — the page appears frozen
Lighthouse INP: 272ms (needs improvement)
Lighthouse recorded the pair selector interaction (button#trade-pair-select.token-select-trigger) taking up to 120ms just to respond to the click, before any data fetching begins

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
Click a different pair in the pair selector and start a stopwatch
Eyeball check: Does a loading state appear immediately after clicking? Does the new pair load within ~1–2 seconds?
Open DevTools → Lighthouse tab → click Analyze page load → wait for the report
Check the INP value in the report
Pass: Pair switch feels near-instant (under 2s to fully load) AND INP is under 200ms
Fail: Pair switch still takes more than 3s OR INP is still above 200ms

Severity / Impact

P2 Performance. An 8–10 second pair switch on a local environment would be significantly worse on a remote network. CEX traders switch markets frequently and expect instant response. A frozen-looking UI during switching erodes trust. Found under W13-C2 (Performance — interaction latency on pair switch).

cc: @PlasticDigits

### Issue Summary Switching to a different pair using the pair selector takes approximately 8 seconds before the new pair begins to appear, and up to 10 seconds to fully load the chart and order book. Chrome Lighthouse records an Interaction to Next Paint (INP) of **272ms** (needs improvement; threshold: under 200ms is good). For a trading interface where CEX migrants expect near-instant market switching, this latency is a significant usability failure. --- ### Reproduction Steps 1. Open the trade page at a valid pair 2. Open DevTools → **Network** tab 3. Click a different pair in the pair selector 4. Start a stopwatch from the moment you click 5. Note how long until the chart and order book show data for the new pair --- ### Expected Behavior The UI should respond to the pair switch within \~500ms. The chart and order book should begin loading immediately with a visible loading state, and fully resolve within 1–2 seconds on a local environment. --- ### Actual Behavior - \~8 seconds before the new pair content begins to appear - \~10 seconds until the chart and order book are fully loaded - No loading indicator shown during the wait — the page appears frozen - Lighthouse INP: **272ms** (needs improvement) - Lighthouse recorded the pair selector interaction (`button#trade-pair-select.token-select-trigger`) taking up to **120ms** just to respond to the click, before any data fetching begins --- ### 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. Click a different pair in the pair selector and start a stopwatch 3. **Eyeball check:** Does a loading state appear immediately after clicking? Does the new pair load within \~1–2 seconds? 4. Open DevTools → **Lighthouse** tab → click **Analyze page load** → wait for the report 5. Check the **INP** value in the report 6. **Pass:** Pair switch feels near-instant (under 2s to fully load) AND INP is under 200ms 7. **Fail:** Pair switch still takes more than 3s OR INP is still above 200ms --- ### Severity / Impact **P2 Performance.** An 8–10 second pair switch on a local environment would be significantly worse on a remote network. CEX traders switch markets frequently and expect instant response. A frozen-looking UI during switching erodes trust. Found under **W13-C2** (Performance — interaction latency on pair switch). 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:12:52 +00:00

(Migrated from gitlab.com)

mentioned in commit d118ca8f3b

mentioned in commit d118ca8f3bbe220ff6230a1d8ea511b6c5293343

PlasticDigits commented

2026-05-22 06:13:07 +00:00

(Migrated from gitlab.com)

Fix shipped on `main` (`d118ca8`)

Pair switching on /trade was serialized behind getPair before PriceChart mounted, so candles and the chart only started loading after indexer pair metadata returned (~8–10s locally with no loading affordance).

What changed

Parallel fetch: PriceChart mounts as soon as pairAddr is valid; getCandles, tape, and limit book queries run in parallel with getPair (no activePair && gate).
Immediate feedback: TradePairSwitchStatus (data-testid="trade-pair-switch-loading") while workspace queries for the active pair are in flight; chart still shows its own Loading chart… spinner.
Prefetch: prefetchTradePairWorkspace warms pair metadata, default 1h candles, tape, and bid/ask book pages on route change, pair onChange, and MenuSelect onOptionIntent (hover/focus another row).

Docs / agent playbooks

docs/frontend.md — § Trade page — pair switch latency
skills/AGENTS_FRONTEND_TRADE_PAIR_SWITCH.md (cross-links layout + price chart skills)

Verification checklist

Open /trade on VITE_NETWORK=local npm run dev with LocalTerra indexer up
DevTools → Network: switch pair via #trade-pair-select; confirm getPair, candles, trades, and limit-book requests start together (not candles only after getPair)
Eyeball: trade-pair-switch-loading appears immediately; chart shows Loading chart…; book spinners; full workspace under ~1–2s locally
Lighthouse: INP on pair selector interaction under 200ms when warmed (per issue acceptance)
Vitest: npm run test:run -- src/pages/TradePage.test.tsx src/utils/__tests__/tradePairPrefetch.test.ts

@totdking — please verify on your M1 / Chrome setup when convenient; leaving the issue open until W13-C2 sign-off.

cc @PlasticDigits

## Fix shipped on `main` (d118ca8) Pair switching on `/trade` was serialized behind `getPair` before `PriceChart` mounted, so candles and the chart only started loading after indexer pair metadata returned (~8–10s locally with no loading affordance). ### What changed - **Parallel fetch:** `PriceChart` mounts as soon as `pairAddr` is valid; `getCandles`, tape, and limit book queries run in parallel with `getPair` (no `activePair &&` gate). - **Immediate feedback:** `TradePairSwitchStatus` (`data-testid="trade-pair-switch-loading"`) while workspace queries for the active pair are in flight; chart still shows its own **Loading chart…** spinner. - **Prefetch:** `prefetchTradePairWorkspace` warms pair metadata, default `1h` candles, tape, and bid/ask book pages on route change, pair `onChange`, and `MenuSelect` `onOptionIntent` (hover/focus another row). ### Docs / agent playbooks - docs/frontend.md — § Trade page — pair switch latency - skills/AGENTS_FRONTEND_TRADE_PAIR_SWITCH.md (cross-links layout + price chart skills) ### Verification checklist - [ ] Open `/trade` on `VITE_NETWORK=local npm run dev` with LocalTerra indexer up - [ ] DevTools → Network: switch pair via `#trade-pair-select`; confirm `getPair`, `candles`, `trades`, and `limit-book` requests start together (not candles only after `getPair`) - [ ] Eyeball: `trade-pair-switch-loading` appears immediately; chart shows Loading chart…; book spinners; full workspace under ~1–2s locally - [ ] Lighthouse: INP on pair selector interaction under 200ms when warmed (per issue acceptance) - [ ] Vitest: `npm run test:run -- src/pages/TradePage.test.tsx src/utils/__tests__/tradePairPrefetch.test.ts` @totdking — please verify on your M1 / Chrome setup when convenient; leaving the issue **open** until W13-C2 sign-off. cc @PlasticDigits

PlasticDigits commented

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

(Migrated from gitlab.com)

mentioned in issue #179

Brouie commented

2026-05-25 07:54:25 +00:00

(Migrated from gitlab.com)

qa cleared source+test layer @PlasticDigits

verified d118ca8 is on main.

TradePage.test.tsx 12/12 PASS — including the #180-specific cases:

"mounts chart and fetches candles before getPair resolves"
"shows pair switch loading status while workspace queries are in flight"

tradePairPrefetch.test.ts 2/2 PASS.

Network-tab parallel-fetch eyeball + Lighthouse INP measurement deferred to @totdking on his M1 / Chrome setup per your note above.

qa cleared source+test layer @PlasticDigits verified `d118ca8` is on main. TradePage.test.tsx 12/12 PASS — including the #180-specific cases: - "mounts chart and fetches candles before getPair resolves" - "shows pair switch loading status while workspace queries are in flight" tradePairPrefetch.test.ts 2/2 PASS. Network-tab parallel-fetch eyeball + Lighthouse INP measurement deferred to @totdking on his M1 / Chrome setup per your note above.

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-05-25 11:10:51 +00:00

PlasticDigits commented

2026-05-29 03:17:54 +00:00

(Migrated from gitlab.com)

mentioned in issue #215