feat(ui): implement skeleton loaders for market map and leaderboard

[Mohammad-Hassan027]

Created reusable brutalist Skeleton component

• Replaced DOWNLOADING_NODES... text with skeleton UI in MarketMapPage
• Updated loading states to match GlassCard dimensions and prevent layout shift

Resolves #60

Description

This PR addresses issue #60 by improving the perceived performance of data-fetching states across the application. I am submitting this contribution as part of SSoC26.

Changes included:

• Skeleton.tsx Component: Created a new, reusable brutalist/cyberpunk skeleton component utilizing the bg-surface-mid color class and a smooth pulse animation.
• MarketMapPage.tsx: Removed the generic "DOWNLOADING_NODES..." text. Implemented the new Skeleton loader structured to mimic the exact dimensions of the GlassCard component. This ensures a seamless transition with zero layout shift when the market data finishes loading.
• Leaderboard.tsx: (If you completed this part) Replaced the fetching state with skeleton rows that map directly to the table column widths.

Screenshots/Video

wait ..

Checklist

• npm run lint passes with no errors
• npm run build compiles without TypeScript errors
• python -m pytest passes
• No .env files, API keys, secrets, model weights, or __pycache__ in this diff
• Branch is rebased on main, not merged

[vercel]

@Mohammad-Hassan027 is attempting to deploy a commit to the karan3431's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🎉 Thank you for your Pull Request! We're thrilled to have your contribution to FreshScan AI.

Before we review, please make sure you have:

• Followed the CONTRIBUTING.md guidelines.
• Ensured all automated CI checks (linting, tests) are passing.
• Checked that your commit messages follow the Conventional Commits format.

A maintainer will review your code as soon as possible!

[Mohammad-Hassan027]

Leaderboard Loader

• Status: Not Resolved
• Details: The codebase currently does not have a Leaderboard.tsx page or component, nor are there any routes, database schemas, or code references to a vendor leaderboard. Therefore, the leaderboard skeleton loaders have not been applied.

[Mohammad-Hassan027]

Ready to merge

[jpdevhub]

Great work on this!

The component is perfectly minimal and fits the brutalist aesthetic exactly how we want it (flat colors, no rounded corners). The implementation on the MarketMapPage looks and feels great!

Could you please:

Fetch/pull the latest main branch (we recently merged the new Leaderboard.tsx page).
Add the loaders to the loading state of the Leaderboard page as well.
Once that's added, this is approved and ready to merge!

[Mohammad-Hassan027]

Hey @jpdevhub , thanks for the great feedback!

I've just pulled the latest main branch and added the Skeleton loaders to the newly merged Leaderboard.tsx page. I've structured the flex layout of the skeleton rows to match the actual table columns perfectly, so there's zero layout shift there as well.

The changes have been pushed and the PR should be good to go. Let me know if you need anything else!

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
fresh-scan-ai	Ready	Preview, Comment	Jun 5, 2026 6:41pm

[jpdevhub]

I am merging it but you are not register as a contributer in the SSoc new website fix that.

[jpdevhub]

Perfect, thanks for contributing.

[Mohammad-Hassan027]

I am merging it but you are not register as a contributer in the SSoc new website fix that.

I have registered but that features are down in ssoc.
have you read recent announcement ?

[jpdevhub]

Yes, your name is not currently in contributer list you have not registered previously that's what I was saying. Good to know you have have filled master form.