nft-gallery icon indicating copy to clipboard operation
nft-gallery copied to clipboard

perf: collection/gallery explore page images

Open hassnian opened this issue 8 months ago • 9 comments

PR Type

  • [ ] Bugfix
  • [ ] Feature
  • [x] 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

  • [x] Ref #10416

Needs QA check

  • @kodadot/qa-guild please review

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

  • [x] Fill up your DOT address: Payout

Screenshot 📸

  • [ ] My fix has changed something on UI;

hassnian avatar Jun 10 '24 10:06 hassnian