# Responsive layout vs data fetching

When adding or changing pages with mobile/desktop views:

## UI layer (responsive)

- Switch layouts with **`v-show`**, not **`v-if`**, so resize does not destroy child components.
- Prefer `ResponsiveViewPair` (`src/layouts/components/ResponsiveViewPair.vue`) or the home shell pattern.
- Keep **`<router-view>`** outside responsive chrome wrappers (header/topbar only in chrome components).
- Modal vs ActionSheet may use `v-if` by breakpoint; they must not own initial page data fetching.

## Data layer (fetch once)

- Call the page composable **once** in the route `index.vue` shell (e.g. `useXPage()` / `useXPageProvider()`).
- Put `onMounted` API calls only in that shell composable, never in `mobile/*` or `desktop/*` views.
- Mobile/Desktop views use **`useXPageContext()`** (provide/inject) — read-only UI.
- Do not call APIs inside `useDesktopBreakpoint()` watchers.

## Shared caches

- Use `runOnceAsync` (`src/composables/useOnceAsync.ts`) for store-level dedup when the same endpoint may be hit from multiple mounts.
- Reuse existing module caches (`useWalletAssets`, Pinia stores) before adding new fetch logic.

## Verify

- Open Network tab, load a page, resize across 768px — **no duplicate requests** for the same endpoint.