[Frontend/UX] Add Skeleton Loaders to MarketMapPage While Vendors Fetch

[jpdevhub]

Problem

When the MarketMapPage loads, the vendor list panel on the left is empty for 1-3 seconds until the API responds. There is no visual feedback — it just looks blank.

Goal

Add skeleton loading states to the vendor list panel consistent with the existing Skeleton component used elsewhere in the app.

Acceptance Criteria

• While loading === true, the vendor list renders 6x <Skeleton /> placeholder rows
• Each skeleton row matches the approximate shape of a real vendor card (name line + score line)
• Map tiles still load normally during this state (no skeleton over the map)
• Skeleton disappears smoothly when real data arrives (no flash)
• Uses the existing src/components/Skeleton.tsx component — do NOT create a new one

Note

The Skeleton component already exists and is used in ResultsPage.tsx. Follow the same pattern.

[arcgod-design]

Hi @jpdevhub! I'd love to work on this as part of SSoC 2026. I'm @arcgod-design.

My Approach:

• Import and use the existing src/components/Skeleton.tsx component in MarketMapPage.tsx
• Detect the loading state via the existing vendor fetch hook and conditionally render skeleton cards instead of vendor map pins/list items
• Match the skeleton shape to the vendor card layout (rounded placeholder blocks matching name, rating, distance areas)
• Ensure smooth fade transition from skeleton to loaded content

Could you please assign this issue to me? Ready to start immediately!