fix: improve WebP prioritization and fix image load fallback handling#294
Conversation
…ct DOM validation warnings.
- Update `transformImagesSrcSet` to always prioritize WebP over JPG/PNG for better performance (LCP), regardless of priority settings. - Remove `srcset` attribute (set to undefined) after image load or on error to force the browser to use the verified `src` URL. - This prevents dead images when `srcset` contains broken URLs (e.g., missing resized versions) but the fallback `src` is valid. - Enhance error handling and debug logging in `loadImageProgress`.
Summary of ChangesHello @fzoonoise, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the image rendering component by prioritizing WebP for better performance and implementing comprehensive error handling. It ensures image stability by providing fallbacks when Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request improves the image component by prioritizing WebP images for better performance and enhancing the fallback logic for greater stability. The changes are logical and well-aligned with the stated goals. I've identified a few areas for improvement: a redundant function call, a potential memory leak with an event listener, and a significant issue with the useEffect dependency array that could lead to bugs when component props change. Addressing these will further improve the component's robustness and maintainability.
| @@ -412,6 +421,9 @@ export default function CustomImage({ | |||
| const loadImageProgress = async () => { | |||
There was a problem hiding this comment.
The useEffect hook at line 473 calls loadImageProgress, but loadImageProgress is not included in its dependency array. Furthermore, loadImageProgress is redefined on every render and depends on props like images and imagesWebP which are also missing from the useEffect dependency array. This can lead to stale closures and bugs where the component does not react to prop changes.
To fix this, you should wrap loadImageProgress and other functions defined inside the component in useCallback and add them to the useEffect dependency array where appropriate. For example:
const loadImageProgress = useCallback(async () => {
// ... function body
}, [images, imagesWebP, /* other dependencies */]);
useEffect(() => {
// ...
if (!isImageLoaded) {
// ...
loadImageProgress();
}
// ...
}, [isImageLoaded, loadImageProgress, /* ... */]);This will ensure that the effect is re-run correctly when its dependencies change, preventing bugs related to stale props.
| const imagesList = getImagesList(images, imagesWebP) | ||
| if (imagesList.length === 0) { | ||
| throw new Error(errorMessage.noImageProvided) | ||
| } | ||
| const resolution = await getResolution(imagesList) | ||
| const url = await loadImages(resolution, imagesList) | ||
| handleImageOnLoaded(url) |
There was a problem hiding this comment.
The getImagesList function is called here again, but imagesList is already computed in the component's outer scope (line 180). This creates a shadowed variable and is redundant. You can remove the local declaration and use the imagesList constant from the parent scope.
| const imagesList = getImagesList(images, imagesWebP) | |
| if (imagesList.length === 0) { | |
| throw new Error(errorMessage.noImageProvided) | |
| } | |
| const resolution = await getResolution(imagesList) | |
| const url = await loadImages(resolution, imagesList) | |
| handleImageOnLoaded(url) | |
| if (imagesList.length === 0) { | |
| throw new Error(errorMessage.noImageProvided) | |
| } | |
| const resolution = await getResolution(imagesList) | |
| const url = await loadImages(resolution, imagesList) | |
| handleImageOnLoaded(url) |
1 participant
This PR addresses image rendering stability and performance issues by enforcing WebP priority, improving error fallback handling, and renaming a prop to comply with React DOM validation.
Additions
transformImagesSrcSetregardless of existing image preference logic.srcusage ifsrcsetfails (prevents dead images).loadImageProgress.Removals
Changes
fetchPriorityprop to lowercasefetchpriorityto comply with DOM property conventions.getResolutionto avoid resolving next image on 'error'; now handled inloadImages.imageSrcSetandimageSizesto beundefinedon load/error to trigger fallback behavior.loadImageProgresserror flow to detect image load failures early.2.2.6to2.2.7.Testing
srcsetentries.srcwhen broken.Screenshots
Todos
Task Links