infinite scroll on collection page

[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

What's new?

• PR closes Infinite Scroll on collection #1411
• <brief_description_of_what_I've_added>

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 </rmrk/collection/26902bc2f7c20c546a-1FVG7>
• I've tested PR on mobile and everything seems works
• I found edge cases
• I've written some unit tests 🧪

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.

[netlify]

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	d5b60dd
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/6256d4e3ce55da000804d7e2
😎 Deploy Preview	https://deploy-preview-2781--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]

Please note that this pr just does an infinite scrolling demo on the collection page.
I will do more refactoring in code organization, like 'mixins', and also deal with some edge cases, so the code does not need to be reviewed for now.

Let's check if this infinite scroll effect is good. @XyloDrone @yangwao @roiLeo
https://deploy-preview-2781--koda-nuxt.netlify.app/rmrk/collections

BTW, this url is shareable to locate the page position.
For example: https://deploy-preview-2781--koda-nuxt.netlify.app/rmrk/collections?page=11

[yangwao]

Just tested on mobile 📱🤍😍

https://deploy-preview-2781--koda-nuxt.netlify.app/rmrk/collections/?page=21

[XyloDrone]

Awesome, it's working for me ! @yangwao ready for closing?

[Jarsen136]

Awesome, it's working for me ! @yangwao ready for closing?

Thanks. Can't close this issue yet, because I still need to refactor it.

BTW, @yangwao Do we only merge code when every view implements infinite scrolling? I think the workload is huge 🤣
Or complete the collection page first, and then support other pages. It's up to you～

[yangwao]

Awesome, it's working for me ! @yangwao ready for closing?

Thanks. Can't close this issue yet, because I still need to refactor it.

BTW, @yangwao Do we only merge code when every view implements infinite scrolling? I think the workload is huge 🤣 Or complete the collection page first, and then support other pages. It's up to you～

yeah, make follow up an issue and hit me up, we can then label it accordingly, it's okay to split huge issue into small fractals :)

[Jarsen136]

yeah, make follow up an issue and hit me up, we can then label it accordingly, it's okay to split huge issue into small fractals :)

Now the code is ready for review. Let's close #1411 in the pr.

And I will close #1582 in my next pr, which will apply the infinite scroll to any other views.

[Jarsen136]

I have resolved all of its conflicts with the main branch.
Looking forward to code reviewing 👀

[yangwao]

@Jarsen136 one more because of nuxt-edge pinning :D

[yangwao]

Once

• infinite scroll on collection page #2781 is merged
  Preserve the ability to go to a particular page or randomize page number, maybe making it sticky while scrolling down?

[yangwao]

@Jarsen136 one more because of nuxt-edge pinning :D

Means you probably fetch pnpm-lock.yaml from main to get this merged tho! :)

[Jarsen136]

@Jarsen136 one more because of nuxt-edge pinning :D

Means you probably fetch pnpm-lock.yaml from main to get this merged tho! :)

yup I know, will merge it later

[roiLeo]

Hmm.. #1411 is about infinite scroll on /collection/{id} and I can see here the code change are for /collections page

[Jarsen136]

Hmm.. #1411 is about infinite scroll on /collection/{id} and I can see here the code change are for /collections page

emm, so let's move on to the next pr ?
I will apply the infinite scroll to any other views. #1582

[yangwao]

pay 150 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $150 @ 158.23 USD/KSM ~ 0.948 $KSM
🧗 Caiv9TbPz68q5dC8EcHu5xKYPRnremimGzqmEejDFNpWWLG
🔗 0x08aaa0ea51c497fcc7e6d74c57f562ab7113a67f38ff7092aee298b78a1f6f54

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

[yangwao]

I've made evidence in #1582 let's continue there! :)

[roiLeo]

no review?

[Jarsen136]

no review?

Pls leave some comments. I will change it in my next pr.

[roiLeo]

sorting don't work here

[Jarsen136]

sorting don't work here

will check it later