FE: Implement Skeleton Loaders for Market Map & Leaderboard

[jpdevhub]

Description

The Idea
Instead of showing generic text like "DOWNLOADING_NODES...", we should show pulsing "Skeleton" UI elements that match the exact shape of the data that is about to load. This massively improves perceived performance.

What needs to be done

• Build a brutalist/cyberpunk skeleton loader component.
• Apply it to the MarketMapPage.tsx sidebar while vendors are loading.
• Apply it to the Leaderboard.tsx rows while data is fetching.
• Ensure the pulsing animation uses our custom bg-surface-mid colors.

[Mohammad-Hassan027]

Hi @jpdevhub,

I want to work on this issue and add skeleton loaders. I am a Full-Stack Developer with experience in React and TypeScript and I'm taking part in SSoC.

I've checked the code and here is my plan:

• Create Skeleton.tsx: I will make a simple skeleton loader component using the bg-surface-mid color and a custom CSS pulse animation to match the projects look.

• Update MarketMapPage.tsx: I see that the loading state is handled with const [loading, setLoading]. Now it shows 'DOWNLOADING_NODES...' in the bottom panel. I will replace that text with the Skeleton component. I will make sure it has the size, as the GlassCard that appears when a market is chosen so that the layout doesn't change.

• Update Leaderboard.tsx: I will do something to the leaderboard. I will replace the loading state with skeleton rows that look like the data table.

If this plan looks good please assign the issue to me so I can start working on it!

[ananyamishra2326]

Hello @jpdevhub
I am ANANYA and i am new to open source. i have gone through all the guidelines and i want to work on this issue.
i understood that this loading nodes are looks very slow and time consuming for user,so i will replace it with the skeleton component that has the exact shape which is about to load.

[ayeshaazeem21]

Hi! I'm Ayesha, an SSoC Season 5 contributor. I'm a B.Tech CSE student familiar with HTML, CSS, and JavaScript. I'd like to work on implementing skeleton loaders for the Market Map and Leaderboard pages. I'll study the existing component structure first and match the current design system. Could you please assign this to me? Thank you

[jpdevhub]

@Mohammad-Hassan027 go ahead !

[jpdevhub]

@ayeshaazeem21 @ananyamishra2326 you can choose any other issues or raise relevant issues.