[raskenite]

Overview

This PR replaces the fake, timer-based load on the API detail page with a real GET /api/apis/:id fetch, and fixes the stuck skeleton that appears when navigating between APIs from the "Related APIs" rail. Loading, not-found and error states now reset correctly whenever the id changes, with proper abort handling and no state writes after unmount or id change.

Related Issue

Changes

🔌 Catalog API client

• [MODIFY] src/api/catalogApi.ts
  • Added fetchApiDetail(id, signal) that calls GET /api/apis/:id, reusing the existing row adapter from the catalogue path.
  • 404 and 400 responses map to a typed NotFound result.
  • Other failures reject with CatalogFetchError.
  • Demo mode resolves from MOCK_APIS without hitting the network.

🖥️ API detail page

• [MODIFY] src/pages/ApiDetailPage.tsx
  • Removed findApiById lookup and the LOADING_DELAY_MS timer.
  • Added a request effect keyed on id with an AbortController and a status: "loading" | "ready" | "not-found" | "error" state.
  • 404 and 400 reuse the existing not-found panel rather than duplicating it.
  • Error state renders a Retry that refetches.
  • Loaded content is announced; loading keeps aria-busy, errors use role="alert", and focus is not stolen on load.
  • Tab resets to "overview" on id change, as before.
  • Skeleton fade animations are skipped when reduced motion is preferred, with no artificial delays.
  • Hooks stay in a stable order across states (existing comment preserved).

Verification Results

npx tsc -p tsconfig.json --noEmit
✅ passed

npm run build
✅ passed

npx vitest run
✅ passed

Acceptance Criteria	Status
Clicking a related API always shows its content	✅ Request effect keyed on id clears loading on every id change
grep -n "findApiById|LOADING_DELAY_MS" src/pages/ApiDetailPage.tsx returns nothing	✅ Both removed from the page
npx tsc -p tsconfig.json --noEmit, npm run build and npx vitest run pass	✅ All pass

Closes #1329

[drips-wave]

@raskenite Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits