feat: add prefetch to all pages using infinite 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

• Continue with prefetch gallery Items on infinity scroll #4922 (comment)
• add prefetch strategy to all pages using infinite scroll, to speed up card loading

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.

[netlify]

✅ Deploy Preview for koda-nuxt ready!

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

[roiLeo]

Might be time to migrate infiniteLoader to Vue composition api?

[Jarsen136]

Might be time to migrate infiniteLoader to Vue composition api?

Yes, but the infiniteLoader composition migration would be blocked by the vue3 refactoring of some big components, like CollectionList, GalleryListetc.

We could implement the composition api for infinite scroll first. And then while refactoring some big list components, we could migrate the infiniteScroll composition one by one.

[roiLeo]

• Is Debounce needed?
• prefetching could be replace by $fetchState.pending
• empty return 😬
• (dom element won't work on SSR)

but ✅ wfm

[codeclimate]

Code Climate has analyzed commit 9948bb7 and detected 1 issue on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	1

View more on Code Climate.

[Jarsen136]

Is Debounce needed?
empty return 😬
✅ Fixed

prefetching could be replace by $fetchState.pending
It would be better to separate the loading status from prefetch and network loading.

(dom element won't work on SSR)
I guess it's not related to the infinite scroll loading. 👀

[exezbcz]

I still have to get to the finish before the content loads. Particularly on collections

[Jarsen136]

I still have to get to the finish before the content loads. Particularly on collections

On the beta env, you have to scroll to the bottom to load next page in any case. While after adding prefetch, the next pages would be auto loaded if you scroll down in normal speed.