prefetch gallery Items on infinity scroll

[Jarsen136]

Thank you for your contribution to the KodaDot NFT gallery.

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

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes Skeleton Items on infinity scroll  #4882
• Requires deployment <>

1. prefetch pages on gallery items list

2. fetch the next pages ahead before hitting the bottom.

3. fix: infinity scroll can get glitched on gallery explore items page

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality
• I've posted a screenshot of demonstrated change in this PR

Optional

• I've tested it at </bsx/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

Had issue bounty label?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot 📸

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

[kodabot]

WARNING @Jarsen136 PR for issue #4882 which isn't assigned to you. Please be warned that this PR may get rejected if there's another assignee for issue #4882

[netlify]

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	eb7525a
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/63e0784ff60f670008d605d3
😎 Deploy Preview	https://deploy-preview-4922--koda-nuxt.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.

[Jarsen136]

1. prefetch pages on gallery items list
2. fetch the next pages ahead before hitting the bottom.

I'm about to make a follow-up issue to add the prefetch strategy to all the other pages using infinity scroll. WDYT?

[yangwao]

seems going blazing fast!

now I'm thinking mass-mints should be grouped somehow, I can't find issue but seen it few days ago hmm 😭

Screen.Recording.2023-02-05.at.17.44.47.mov

[yangwao]

oh, found issue, scrolling up is not so fast ?

Screen.Recording.2023-02-05.at.17.50.57.mov

[Jarsen136]

oh, found issue, scrolling up is not so fast ?

Screen.Recording.2023-02-05.at.17.50.57.mov

Oh yes, Let me add prefetch also for srcoll up. Will fix it later.

[yangwao]

make a follow-up issue to add the prefetch strategy to all the other pages using infinity scroll. WDYT?

yes! I think it's doable. It's possible make it as util to dedupe code?

[Jarsen136]

make a follow-up issue to add the prefetch strategy to all the other pages using infinity scroll. WDYT?

yes! I think it's doable. It's possible make it as util to dedupe code?

Sure. Will make it reusable.

[codeclimate]

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

View more on Code Climate.

[Jarsen136]

oh, found issue, scrolling up is not so fast ?

It should be faster now when scrolling up. I have added prefetch for scrolling up, though it's not as smooth as scrolling down. I think it could be improved in the next issue.

[yangwao]

it's far so good for me!

[yangwao]

pay 50 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $50 @ 35.96 USD/KSM ~ 1.39 $KSM
🧗 Caiv9TbPz68q5dC8EcHu5xKYPRnremimGzqmEejDFNpWWLG
🔗 0xdd65121fdb2cf5138693c65d681791cf75b7beaf228d510f43d4e678385e5ecd

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