perf: collection/gallery explore page images

[hassnian]

PR Type

• Bugfix
• Feature
• Refactoring

Context

First pr of more to come to close the main issue, this pr only focuses on the explore pages
mainly

• lazy loading of images
• use cfi size variants to load smaller images where possible

Collection Explore

• lazy load images: eagerly load first 3 rows of each fetch remaining are lazy loaded
  • first page load (image resources)
    - mobile: 2.5mb (this pr) vs 19.8mb (prod)
    - desktop: 3mb (this pr) vs 19.8mb (prod)
• use metadata from collection meta , saves an extra call, most collections didn't need that (ahp 87/94 collections),
• use cfi size variants in collection images
  • banner: about the same for me , but should fetch smaller images depending on the user's display
  • image: average of 8-10x smaller images
• profile image: use cfi size variants
• remove: pwa.client.ts

Items Explore

• lazy load images: eagerly load first 2 rows of each fetch remaining are lazy loaded

• Ref Request heavy app - high amount of fetches #10416

Needs QA check

• @kodadot/qa-guild please review

Did your issue had any of the "$" label on it?

• Fill up your DOT address: Payout

Screenshot 📸

• My fix has changed something on UI;

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	9675166
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/6685527e4c6db40008474dd7
😎 Deploy Preview	https://deploy-preview-10443--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 configuration.

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/[email protected]	None	0	1.41 MB	bnjmnt4n
npm/[email protected]	environment, filesystem, unsafe	0	8.25 MB	prettier-bot
npm/[email protected]	None	0	32.4 MB	typescript-bot

View full report↗︎

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[hassnian]

@preschian should we remove providers/cloudflare.ts, and route all images through the image worker ?

also some images fail to load like

cfi ❌ https://kodadot.xyz/cdn-cgi/imagedelivery/jk5b6spi_m_-9qC4VTnjpg/bafybeiaq2lvwomxmtmqyr5yigi4mty7ybib4myqewv6c265aheqv6lvjgu/w=700

image worker ✅ https://image-beta.w.kodadot.xyz/ipfs/bafybeiaq2lvwomxmtmqyr5yigi4mty7ybib4myqewv6c265aheqv6lvjgu

[preschian]

should we remove providers/cloudflare.ts, and route all images through the image worker ?

Yes, this one can help reduce the request counts. But we need to implement cfi size variants in image-worker first

• use metadata from collection meta , saves an extra call, most collections didn't need that (ahp 87/94 collections),

if the meta = null, try to get the image from metadata

[prury]

i'm having some problems when scrolling down images on ahp, at some point it takes a long time to be loaded(here i'm on page 3):

could be unrelated as we are having some problems on ahp

[hassnian]

Yes, this one can help reduce the request counts. But we need to implement cfi size variants in image-worker first

done, needs worker update kodadot/workers#313

i'm having some problems when scrolling down images on ahp, at some point it takes a long time to be loaded(here i'm on page 3):

could be unrelated as we are having some problems on ahp

worked fine for me, @prury let's try again after kodadot/workers#313 is merged

[hassnian]

@prury the worker is ready, try again and let me know

[vikiival]

cc @Jarsen136 pls review
cc @hassnian pls resolve conflicts

[codeclimate]

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

View more on Code Climate.