code/cl8y-dex-terraclassic

Fork 0

UI: Tab navigation does not update the page without a hard refresh — route change silently ignored #182

New issue

Closed

opened 2026-05-22 12:12:05 +00:00 by totdking · 10 comments

totdking commented

2026-05-22 12:12:05 +00:00

(Migrated from gitlab.com)

Issue Summary

Clicking a header navigation tab (e.g. switching from /swap to /pool) does not load the new route. The URL in the browser address bar does not change and the page content remains on the current route. A hard refresh (or manually typing the tab URL and pressing Enter) is required to load the intended page. This affects at minimum the Swap → Pool tab transition and was reproduced consistently across multiple attempts.

However the /more dropdown menu functions well

Reproduction Steps

Open the app in the browser
Navigate to /swap — confirm the Swap page is loaded
Click the Pool tab in the header navigation
Observe — the page does not change; Pool content does not load; URL stays on /swap
Perform a hard refresh (Cmd+Shift+R / Ctrl+Shift+R) or type the Pool URL directly in the address bar and press Enter
Observe — Pool page now loads correctly after the forced reload

Expected Behavior

Clicking any header navigation tab should immediately update the route and render the corresponding page without requiring a manual reload. Client-side routing (React Router or equivalent) should handle the transition in-place.

Actual Behavior

Clicking the Pool tab and other tabs from /swap does not trigger a route change. The page stays on the current route and renders no new content. No error is shown and no loading indicator appears. The navigation click is visually acknowledged (tab may highlight) but the app does not navigate. A hard refresh of the new route URL is the only workaround.

Screen Record

{width=900 height=551}

Environment Details

Field	Value
OS	macOS
Browser	chrome browser
Viewport	~1440px desktop
Network	localterra
Frontend	`VITE_NETWORK=local npm run dev` at `localhost:3000`

Wallet / Device Details

Wallet: Keplr browser extension
Wallet state: Connected
Route transition tested: /swap → /pool

Severity / Impact

P1 — potential LAUNCH-BLOCKER. Core navigation is non-functional for the Swap → Pool transition without a hard refresh. If this affects all inter-tab navigation, users cannot move between any section of the app during a session without reloading. On mainnet with real users this would cause high drop-off and confusion — a trader who clicks Pool expecting to add liquidity and sees nothing happen will assume the app is broken. Root cause is likely a broken router link handler, a missing <Link> component, or a history/push event not being picked up by the router. Requires reproduction on multiple browsers and routes to determine full scope.

cc: @PlasticDigits

### Issue Summary Clicking a header navigation tab (e.g. switching from `/swap` to `/pool`) does not load the new route. The URL in the browser address bar does not change and the page content remains on the current route. A hard refresh (or manually typing the tab URL and pressing Enter) is required to load the intended page. This affects at minimum the Swap → Pool tab transition and was reproduced consistently across multiple attempts. However the `/more` dropdown menu functions well --- ### Reproduction Steps 1. Open the app in the browser 2. Navigate to `/swap` — confirm the Swap page is loaded 3. Click the **Pool** tab in the header navigation 4. Observe — the page does not change; Pool content does not load; URL stays on `/swap` 5. Perform a hard refresh (Cmd+Shift+R / Ctrl+Shift+R) or type the Pool URL directly in the address bar and press Enter 6. Observe — Pool page now loads correctly after the forced reload --- ### Expected Behavior Clicking any header navigation tab should immediately update the route and render the corresponding page without requiring a manual reload. Client-side routing (React Router or equivalent) should handle the transition in-place. --- ### Actual Behavior Clicking the Pool tab and other tabs from `/swap` does not trigger a route change. The page stays on the current route and renders no new content. No error is shown and no loading indicator appears. The navigation click is visually acknowledged (tab may highlight) but the app does not navigate. A hard refresh of the new route URL is the only workaround. --- ## Screen Record ![Screen Recording 2026-05-22 at 13.20.25.mov](/uploads/95779bf8f78d2dde4f63b41f7acce95b/Screen_Recording_2026-05-22_at_13.20.25.mov){width=900 height=551} --- ### Environment Details | Field | Value | |-------|-------| | OS | macOS | | Browser | _chrome browser_ | | Viewport | \~1440px desktop | | Network | _localterra_ | | Frontend | `VITE_NETWORK=local npm run dev` at `localhost:3000` | --- ### Wallet / Device Details - **Wallet:** Keplr browser extension - **Wallet state:** Connected - **Route transition tested:** `/swap` → `/pool` --- ### Severity / Impact **P1 — potential LAUNCH-BLOCKER.** Core navigation is non-functional for the Swap → Pool transition without a hard refresh. If this affects all inter-tab navigation, users cannot move between any section of the app during a session without reloading. On mainnet with real users this would cause high drop-off and confusion — a trader who clicks Pool expecting to add liquidity and sees nothing happen will assume the app is broken. Root cause is likely a broken router link handler, a missing `<Link>` component, or a history/push event not being picked up by the router. Requires reproduction on multiple browsers and routes to determine full scope. cc: @PlasticDigits

totdking commented

2026-05-22 12:26:37 +00:00

(Migrated from gitlab.com)

changed title from Tabs don't change onClick of the assigned button to UI: Tab navigation does not update the page without a hard refresh — route change silently ignored

changed title from <code class="idiff">Tabs don't change onClick of the assigned button</code> to <code class="idiff">UI: Tab navigation does not update the page without a hard refresh — route change silently ignored</code>

totdking commented

2026-05-22 12:26:37 +00:00

(Migrated from gitlab.com)

changed the description

PlasticDigits commented

2026-05-25 02:26:08 +00:00

(Migrated from gitlab.com)

mentioned in commit d69c8c37ae

mentioned in commit d69c8c37aefe598cc35e30042864b66187871f68

PlasticDigits commented

2026-05-25 02:26:29 +00:00

(Migrated from gitlab.com)

Fix landed on `main` (`a494a22`)

Header/mobile tab clicks could paint :active styles while history and <Outlet> stayed on the previous route until a hard refresh — especially with wallet extensions (Keplr) intercepting default <a> navigation. A render-phase setState in RouteContentReadyProvider (from the #138 NFA footer work) could also interfere with React Router transitions.

Changes

AppShellNavLink — plain left-click calls navigate() after preventDefault so client routing always updates the URL; modified clicks (new tab, etc.) unchanged.
RouteContentReadyProvider — removed render-phase setState on pathname change; readyForPath === pathname already prevents stale footer ready state.
Docs / agents: docs/frontend.md § Responsive shell, skills/AGENTS_FRONTEND_SHELL_NAV.md, cross-links in responsive-header and risk-disclaimer playbooks.
Tests: AppShellNavLink.test.tsx, E2E desktop primary tabs change URL without reload (GitLab #182).

Verification checklist

Desktop (~1440px): from Swap (/), click Pool → URL /pool, pool route renders (no reload).
Click Trade, Charts, Limits, Swap in turn — URL and main content update each time.
Tablet compact (768–1023px): Pool via header More menu still navigates.
Mobile bottom bar: primary tabs + More sheet links update URL.
With Keplr connected (reporter env): repeat Swap → Pool → Trade without hard refresh.
NFA footer still appears promptly after navigation (regression #138).
npm run test:run -- src/components/common/__tests__/AppShellNavLink.test.tsx src/contexts/__tests__/RouteContentReadyContext.test.tsx
REQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.ts -g "desktop primary tabs"

@brouie — please verify on main with your usual localterra + Keplr setup; leaving this issue open until confirmed.

## Fix landed on `main` (a494a22) Header/mobile tab clicks could paint `:active` styles while **history and `<Outlet>` stayed on the previous route** until a hard refresh — especially with wallet extensions (Keplr) intercepting default `<a>` navigation. A render-phase `setState` in `RouteContentReadyProvider` (from the #138 NFA footer work) could also interfere with React Router transitions. ### Changes - **`AppShellNavLink`** — plain left-click calls `navigate()` after `preventDefault` so client routing always updates the URL; modified clicks (new tab, etc.) unchanged. - **`RouteContentReadyProvider`** — removed render-phase `setState` on pathname change; `readyForPath === pathname` already prevents stale footer ready state. - **Docs / agents:** [docs/frontend.md § Responsive shell](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/docs/frontend.md#responsive-header-navigation), [`skills/AGENTS_FRONTEND_SHELL_NAV.md`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/skills/AGENTS_FRONTEND_SHELL_NAV.md), cross-links in responsive-header and risk-disclaimer playbooks. - **Tests:** `AppShellNavLink.test.tsx`, E2E `desktop primary tabs change URL without reload (GitLab #182)`. ### Verification checklist - [ ] Desktop (~1440px): from **Swap** (`/`), click **Pool** → URL `/pool`, pool route renders (no reload). - [ ] Click **Trade**, **Charts**, **Limits**, **Swap** in turn — URL and main content update each time. - [ ] Tablet compact (768–1023px): **Pool** via header **More** menu still navigates. - [ ] Mobile bottom bar: primary tabs + **More** sheet links update URL. - [ ] With **Keplr connected** (reporter env): repeat Swap → Pool → Trade without hard refresh. - [ ] NFA footer still appears promptly after navigation (regression #138). - [ ] `npm run test:run -- src/components/common/__tests__/AppShellNavLink.test.tsx src/contexts/__tests__/RouteContentReadyContext.test.tsx` - [ ] `REQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.ts -g "desktop primary tabs"` @brouie — please verify on `main` with your usual localterra + Keplr setup; leaving this issue **open** until confirmed.

PlasticDigits commented

2026-05-27 06:34:23 +00:00

(Migrated from gitlab.com)

mentioned in commit a9832a6be1

mentioned in commit a9832a6be199b1ce4d3238be25a7a8a14c2adffc

PlasticDigits commented

2026-05-27 06:34:48 +00:00

(Migrated from gitlab.com)

Verified and closed (agent run 2026-05-27)

Confirmed fix on main (original AppShellNavLink + RouteContentReadyProvider changes from a494a22). No additional routing bugs found.

Infrastructure

LocalTerra healthy (127.0.0.1:26657)
Host Postgres on :5432 (dex_indexer DB)
Indexer healthy (http://127.0.0.1:3001/health)
Frontend dev at http://127.0.0.1:3000 (VITE_NETWORK=local)
Bot swarm running

Verification checklist

Desktop (~1440px): Swap → Pool → Trade → Charts → Limits → Swap — URL and content update without reload
Tablet compact (900px): Pool via header More menu navigates to /pool
Mobile bottom bar: Trade, Pool tabs + More sheet → Charts update URL
Connected wallet: Simulated dev wallet — Swap → Pool → Trade without hard refresh (proxy for extension-connected sessions; Keplr extension not available in headless agent env)
NFA footer visible promptly after route changes (regression #138)
npm run test:run -- AppShellNavLink.test.tsx RouteContentReadyContext.test.tsx — 5/5 passed
REQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.ts -g "desktop primary tabs" — passed
Playwright screenshots captured for Swap (/) and Pool (/pool) after client-side tab click

Follow-up on main

Added E2E: connected wallet: primary tabs change URL without reload (GitLab #182) in navigation.spec.ts (commit a9832a6)

Note: Cursor browser MCP was not available in this agent session; visual verification used Playwright browser automation + screenshots instead.

## Verified and closed (agent run 2026-05-27) Confirmed fix on `main` (original `AppShellNavLink` + `RouteContentReadyProvider` changes from a494a22). No additional routing bugs found. ### Infrastructure - LocalTerra healthy (`127.0.0.1:26657`) - Host Postgres on `:5432` (dex_indexer DB) - Indexer healthy (`http://127.0.0.1:3001/health`) - Frontend dev at `http://127.0.0.1:3000` (`VITE_NETWORK=local`) - Bot swarm running ### Verification checklist - [x] Desktop (~1440px): Swap → Pool → Trade → Charts → Limits → Swap — URL and content update without reload - [x] Tablet compact (900px): Pool via header **More** menu navigates to `/pool` - [x] Mobile bottom bar: Trade, Pool tabs + **More** sheet → Charts update URL - [x] Connected wallet: Simulated dev wallet — Swap → Pool → Trade without hard refresh (proxy for extension-connected sessions; Keplr extension not available in headless agent env) - [x] NFA footer visible promptly after route changes (regression #138) - [x] `npm run test:run -- AppShellNavLink.test.tsx RouteContentReadyContext.test.tsx` — 5/5 passed - [x] `REQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.ts -g "desktop primary tabs"` — passed - [x] Playwright screenshots captured for Swap (`/`) and Pool (`/pool`) after client-side tab click ### Follow-up on main - Added E2E: `connected wallet: primary tabs change URL without reload (GitLab #182)` in `navigation.spec.ts` (commit a9832a6) **Note:** Cursor browser MCP was not available in this agent session; visual verification used Playwright browser automation + screenshots instead.

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-05-27 06:34:53 +00:00

Brouie commented

2026-06-11 02:54:49 +00:00

(Migrated from gitlab.com)

mentioned in issue #358