Add a token-driven loading skeleton to the ApiDetailPage hero and metrics while the API resolves

[greatest0fallt1me]

Description

This is a UI/UX loading-state issue. src/pages/ApiDetailPage.tsx resolves the API synchronously from findApiById and either renders the full hero/metrics or an immediate "API not found" empty state — there is no loading state. As the app grows toward real data fetching, an abrupt empty-to-full swap looks broken; the page should show a skeleton for the hero, metrics, and sidebar first.

Requirements and Context

• Add a brief loading phase (mocked, consistent with the 1.5s simulation in MarketplacePage.tsx) that renders skeletons for the hero, performance metrics, and sidebar cards using src/components/Skeleton.tsx.
• Keep the existing "not found" empty state for genuinely missing APIs.
• Skeletons must match the real layout dimensions to avoid layout shift, in both themes.
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/api-detail-skeleton

2. Implement changes
   • src/pages/ApiDetailPage.tsx — add a loading state and skeleton render path
   • Reuse Skeleton; add any needed .api-detail skeleton classes in src/index.css
3. Test and commit
   • npm run dev, open a detail route and observe the skeleton-to-content transition
   • Confirm no layout shift and correct theming
   • Include test output and notes in the PR

Example commit message

feat: add loading skeleton to API detail page

Acceptance Criteria

• Hero, metrics, and sidebar show skeletons during the loading phase
• "Not found" empty state still renders for missing APIs
• No cumulative layout shift when content replaces skeletons
• Skeletons render correctly in both themes

Guidelines

• Reuse the shared Skeleton component; match real dimensions
• Clear documentation and inline comments
• Timeframe: 96 hours