add skeleton when query is loading

[leo-anderson-x]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

• Feature

Context

• Closes Default loading dialog on explorer and collections #5749

Had issue bounty label?

• Fill up your KSM address: Payout

Screenshot 📸

• My fix has changed something on UI; a screenshot is best to understand changes for others.

CleanShot.2023-05-06.at.20.55.03.mp4

Copilot Summary

🤖 Generated by Copilot at 93ba4fe

This pull request adds loading states for the collection list and items grid components, using skeleton components to show placeholders while the data is loading. It also adds two new skeleton components, CollectionCardSkeleton.vue and NeoNftCardSkeleton.vue, to the @kodadot1/brick library, and exports them for reuse.

🤖 Generated by Copilot at 93ba4fe

Skeletons appear
b-skeleton shapes the cards
Winter of loading

[kodabot]

SUCCESS @leo-anderson-x PR for issue #5749 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	97118dc
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64621bf84a911700086c7bfc
😎 Deploy Preview	https://deploy-preview-5872--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[reviewpad]

AI-Generated Summary: This pull request adds skeleton loading indicators for query results in the CollectionList and ItemsGrid components. The implementation includes the creation of CollectionCardSkeleton and NeoNftCardSkeleton components, as well as modifications to the CollectionList, ItemsGrid, and index files.

[exezbcz]

nice! works for me 🚀

wdyt about removing hover on skeleton load? Does that make sense or nah?

[leo-anderson-x]

removing hover on skeleton load?

@exezbcz good idea, updated

[roiLeo]

Coule you please use NeoSkeleton component instead of b-skeleton ?

[leo-anderson-x]

Coule you please use NeoSkeleton component instead of b-skeleton ?

@roiLeo updated

[roiLeo]

Doesn't look perfect on large screen, maybe increase numbers: 12 for collections and 14 for items

FYI: no-margin = no-margin="true"

[vikiival]

Pointed out by @roiLeo and @Jarsen136

[leo-anderson-x]

Doesn't look perfect on large screen, maybe increase numbers: 12 for collections and 14 for items

@roiLeo updated to: if screen width < 1024 (at this point 4 is enough), show 4, else show 12 collections and 14 items.

[roiLeo]

I find it more readable to put skeleton near <DynamicGrid /> component, so you'll have all 3 options in the same file (data, loading skeleton & empty data)
Did you try to put it on that level?

[leo-anderson-x]

I find it more readable to put skeleton near <DynamicGrid /> component, so you'll have all 3 options in the same file (data, loading skeleton & empty data) Did you try to put it on that level?

@roiLeo u means the following three options in parallel, right?

<DynamicGrid v-if="total !== 0">...</DynamicGrid>

<template v-else-if="isLoading">
  <CollectionCard v-for="n in SKELETON_COUNT" :key="n" is-loading />
</template>

<EmptyResult v-else />

But the skeletons also needs to be wrapped in a DynamicGrid to get the same size as a normal Card (it is dynamically derived from the screen size). So if we place three options in parallel, the result will look like this:

<DynamicGrid v-if="total !== 0">...</DynamicGrid>

<DynamicGrid v-else-if="isLoading" {...same props as above}>
  <CollectionCard v-for="n in SKELETON_COUNT" :key="n" is-loading />
</DynamicGrid>

<EmptyResult v-else />

This seemed a bit repetitive, so I chose to put the skeletons inside the first <DynamicGrid />, rather than alongside the first <DynamicGrid /> like the <EmptyResult />.

[roiLeo]

I find it more readable to put skeleton near <DynamicGrid /> component, so you'll have all 3 options in the same file (data, loading skeleton & empty data) Did you try to put it on that level?

@roiLeo u means the following three options in parallel, right?

<DynamicGrid>...</DynamicGrid>

<template v-if="isLoading">
  <CollectionCard v-for="n in SKELETON_COUNT" :key="n" is-loading />
</template>

<EmptyResult v-if="total === 0 && !isLoading" />

Yes I find something like that easier to maintain

But the skeletons also needs to be wrapped in a DynamicGrid to get the same size as a normal Card (it is dynamically derived from the screen size). So if we place three options in parallel, the result will look like this:

<DynamicGrid>...</DynamicGrid>

<DynamicGrid v-if="isLoading" {...same props as above}>
  <CollectionCard v-for="n in SKELETON_COUNT" :key="n" is-loading />
</DynamicGrid>

<template v-if="isLoading">
  <CollectionCard v-for="n in SKELETON_COUNT" :key="n" is-loading />
</template>

<EmptyResult v-if="total === 0 && !isLoading" />

Hmmmm... not sure I'm following you're idea, more like:

<DynamicGrid v-if="!isLoading && total">...</DynamicGrid> 

<template v-if="isLoading">
  <!-- use same limit as query -->
  <div v-for="index in limit" :key="index">
    <div class="collection-card card">
        (Here you manage to recreate simple card using same class with skeleton components)
    </div>
  </div>
</template>
 
<EmptyResult v-if="total === 0 && !isLoading" />

[roiLeo]

✅ works for me anyway

[vikiival]

Please resolve conflicts +
@roiLeo has some comments

[prury]

will check again when it's ready

[vikiival]

@prury should be ready

[codeclimate]

Code Climate has analyzed commit 97118dc and detected 0 issues on this pull request.

View more on Code Climate.

[prury]

@prury should be ready

Its showing 40 skeletons for both collections and items for me, if that is intended, works well, had to use a bandwidth limiter to test it.

• tested on android, firefox, chrome.
• responsiveness looking good

[yangwao]

pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 25.57 USD/KSM ~ 1.173 $KSM
🧗 DzUbHCk3Fr3XdCPNKo7uCJvtBH7YfgiFbn4Gr3VmCMiFy1C
🔗 0x754109af7f1c6e183f3a7c5bd2f6d6358d47b2e885c30866404cdb17cd6d37f9

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues

[yangwao]

[leo-anderson-x]

Its showing 40 skeletons for both collections and items for me, if that is intended, works well

@prury Yes, it's intended. We use same size as fetched data