fix: profile tabs not working properly sometimes

[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 profile Tabs not working properly sometimes #2723
• <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	4dca212
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/6246e6747e578a00089fc2e6
😎 Deploy Preview	https://deploy-preview-2725--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.

[vikiival]

Code looks oki

[vikiival]

@XyloDrone said she wants to test it

[XyloDrone]

Hmm, still having the same issue...

this is via https://deploy-preview-2725--koda-nuxt.netlify.app/rmrk/u/5EekGnpPfqHYg8jSq7kxaPUEeDnVhDMJbU62jNgT5iocuvsQ?tab=collected

[Jarsen136]

Hmm, still having the same issue... this is via https://deploy-preview-2725--koda-nuxt.netlify.app/rmrk/u/5EekGnpPfqHYg8jSq7kxaPUEeDnVhDMJbU62jNgT5iocuvsQ?tab=collected

It seem that this address have no any collected items and nfts. So the current display is normal.

What do you think 👀 cc @vikiival
operationName: "nftListCollected"

operationName: "firstNftByIssuer"

[XyloDrone]

oh, I actually have quite a few NFTs :D
Seems to be working on kodadot.xyz now tho: https://kodadot.xyz/rmrk/u/FAMw7AGJCJURnYtbpa1ULqEnp4jVtAV3qvn82xQZX27ezBB?tab=collected

[Jarsen136]

oh, I actually have quite a few NFTs :D Seems to be working on kodadot.xyz now tho: https://kodadot.xyz/rmrk/u/FAMw7AGJCJURnYtbpa1ULqEnp4jVtAV3qvn82xQZX27ezBB?tab=collected

Oh, sorry. I will check it.

[roiLeo]

Sorry if I'm missing something but could you explain why you use a debounce?
For me debounce & timeout are not good pratice

[Jarsen136]

Hmm, still having the same issue... this is via https://deploy-preview-2725--koda-nuxt.netlify.app/rmrk/u/5EekGnpPfqHYg8jSq7kxaPUEeDnVhDMJbU62jNgT5iocuvsQ?tab=collected

It seem that this address have no any collected items and nfts. So the current display is normal.

oh, I actually have quite a few NFTs :D Seems to be working on kodadot.xyz now tho: https://kodadot.xyz/rmrk/u/FAMw7AGJCJURnYtbpa1ULqEnp4jVtAV3qvn82xQZX27ezBB?tab=collected

I found the reason. These two address are different. Though I have no idea why they have the same display name : )

5EekGnpPfqHYg8jSq7kxaPUEeDnVhDMJbU62jNgT5iocuvsQ -> have no nfts
FAMw7AGJCJURnYtbpa1ULqEnp4jVtAV3qvn82xQZX27ezBB -> have nfts

Actually, you may try to visit the below url to test if it works well. @XyloDrone
https://deploy-preview-2725--koda-nuxt.netlify.app/rmrk/u/FAMw7AGJCJURnYtbpa1ULqEnp4jVtAV3qvn82xQZX27ezBB?tab=collected

And it WFM

[Jarsen136]

Sorry if I'm missing something but could you explain why you use a debounce? For me debounce & timeout are not good pratice

OK, I explain why I use it. The error in the issue causes by repeated network requests on page initialization.

invoke request from component mounted:

invoke request from pageChange:

The this.id is undefined when requesting from pageChange, so the response list may be [] sometimes. further resulted in an empty list of pages.

We need to set 'this.id' before request. Also prevent from double request by using debounce.

[XyloDrone]

Cool, it works now!

[yangwao]

pay 100 usd
let's test on main

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $100 @ 201.69 USD/KSM ~ 0.496 $KSM
🧗 Caiv9TbPz68q5dC8EcHu5xKYPRnremimGzqmEejDFNpWWLG
🔗 0x5dfec73cbc8b18b0491c409b5e0331331814ace1c14e09ba18b95357ea22709d

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