Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
| <img | ||
| src={src} | ||
| alt={alt} | ||
| loading="lazy" |
There was a problem hiding this comment.
lazy loading like this causes issues with the view transitions on iOS. The browser would take a snapshot of the gift cards without the images loaded (even though they had previously been cached and decoded in the same session), and then during the transition the images would flash
There was a problem hiding this comment.
remind me why did we add it initially? if it was adding some value, should we disable it only on ios?
| * Schedules non-critical work after initial render. | ||
| * Uses idle time when available to avoid impacting UI responsiveness. | ||
| */ | ||
| function scheduleAfterPaint(callback: () => void) { |
There was a problem hiding this comment.
Maybe this is unnecessary, but I did this so that decoding and loading the images doesn't compete with other loading tasks and only starts when the main thread is idle in between async calls and after all sync work is donw
There was a problem hiding this comment.
what does decoding mean in this case? don't we just have regular image to display in browser?
|
|
||
| export const links: LinksFunction = () => | ||
| GIFT_CARD_IMAGES.map((imageUrl) => ({ | ||
| rel: 'prefetch', |
There was a problem hiding this comment.
This optimizes for when the user opens the app directly to /gift-cards. If the user comes from the home page this isn't necessary because we already preload the images there
There was a problem hiding this comment.
why would you need to prefetch when coming to this page when this page requires it anyway? my understanding is that prefetch is used when you land on page A and then maybe page B has some images and you want them to be loaded immidiialtey instead of only when user clicks to go to B
2 participants
Even if the images are cached, the browser will still need to decode them on each fresh load which causes the images to flash in. This PR makes it so the images are decoded before the user goes to the gift-card route.