Added Skeleton Loader for loading Coins list

[ilaki]

Fixes #234

Changes

• Add skeleton loader (fade effect) until all visible items are loaded
• Scroll bar style (pending)
• Rerender and getting to the top of the list during user scroll (pending)

[vercel]

@ilaki is attempting to deploy a commit to the Mira-dex Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mira-amm-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 8, 2025 7:03am

[amaljosea]

Hi @ilaki

Looks like the build is failing.

Please changeskeleton.module.css to Skeleton.module.css

[amaljosea]

Hi @ilaki

• Video 1
• Video 2

To explore:

Lots of API calls when opening the token picker:

• Can you check if the API calls are required?
  • If required why?
    • Can we merge them into a single call?

Large images:

• Are smaller thumbnail images available? Can you research?
• Why can't we take the icons from the asset.json?
• If there is no solution, can we add a loading skeleton to the image to make it look nice?

We could handle these in a separate PR also if needed, but just wanted to get your thoughts first. Let me know before you implement.

[ilaki]

@amaljosea
Update:

1. The multiple fetch by asset Id calls inside useAssetImage hook is made redundantly since its querying same data(l1Address & image) which is already coming in assets query in parent component, so removing them.

I have some doubts:

1. For image, we dont have compressed or thumbnail size images for assets in database. Can we add them? or can we add as local image file under frontend assets and update/overwrite in case database image doesnt match?
2. Also loading assets.json url from verifiedAssetData is preferred over image url from sqdIndexer for some reason ? I am asking because latency looks the same when observed.

[amaljosea]

https://www.loom.com/share/60eb336ca9fd40d0ac43e719c20f5de7?from_recorder=1&focus_title=1