Skip to content

feat(img): tuned image loading & added fallbacks#1192

Merged
lgtmrobo merged 9 commits intomainfrom
fix/NFT-1840-image-optimizations
Apr 12, 2023
Merged

feat(img): tuned image loading & added fallbacks#1192
lgtmrobo merged 9 commits intomainfrom
fix/NFT-1840-image-optimizations

Conversation

@ryolambert
Copy link
Copy Markdown
Contributor

@ryolambert ryolambert commented Apr 7, 2023

Describe your changes

  • Fixes image optimizations coming from profiles, nft cards, collections, etc.
  • Reworks images to use BlurImage w/on blur loading blurDataUrl (base64 image) & svg fallback.
  • Added base64 encoding handling for BlurImage.
  • Moved no dependency helper utils to utils/format (The majority of this PR's file changes)

Ex:

https://user-images.githubusercontent.com/19197856/231501792-cc543c72-0223-4b5b-8d83-755e1606a44f.mov
Screenshot 2023-04-11 at 6 43 26 PM

Associated JIRA task link

Routes affected by changes

example: '/app/list'

  • /* All routes
  • Main changes are to RoundedCornerMedia.tsx & BlurImage.tsx components and their associated utils at lib/image/loader.ts & utils/image.

Checklist before requesting a review

  • I have performed a self-review of my code

    Describe your self-review process (if applicable):

     -
    
  • I have added component tests for this work
  • I have added e2e tests for this work
  • I have properly gated the features with a doppler env variable:
    • updated sandbox doppler config
    • updated staging doppler config
    • updated production doppler config

    Include the added doppler env variables here (If applicable):

       -
    

Prior Work

If this is a follow-up PR to existing work, link the relevant PR(s) here (or N/A if not a follow-up)

  • Link(s) to Prior Work:

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 7, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
production-interface ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 12, 2023 6:01pm
sandbox-interface ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 12, 2023 6:01pm
staging-interface ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 12, 2023 6:01pm
1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
storybook ⬜️ Ignored (Inspect) Apr 12, 2023 6:01pm

Copy link
Copy Markdown
Contributor

@lgtmrobo lgtmrobo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall looks good, will be excited to see the blur image in use in more places. This def needs some testing though since it touches a lot of pages, but no major red flags from a first pass

currentNftsDescriptionsVisible: true,
currentLayoutType: ProfileLayoutType.Default,
searchQuery: null,
searchQuery: '',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you test this one? It may cause issues with the search, but not 100% sure

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did test it 👍

This resolves a react/html bug complaining about the inputs being null.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

awesome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants