From b3b1792eaed83fca435d97c56af7701b9fa48fa3 Mon Sep 17 00:00:00 2001 From: Oleg Isonen Date: Tue, 13 Feb 2024 12:19:07 +0100 Subject: [PATCH] fix: Image on canvas in latest chrome may not render when loading is lazy (#2902) ## Description When on canvas inside builder we need to always eager load images to avoid this bug in latest chrome with cache turned off ## Steps for reproduction 1. turn off cache 2. add image component on canvas 3. see it renders as expected (loading lazy in settings is default, but on canvas it renders as loading eager) ## Code Review - [ ] hi @istarkov , I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 5de6) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env.example` and the `builder/env-check.js` if mandatory --- packages/sdk-components-react/src/image.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/sdk-components-react/src/image.tsx b/packages/sdk-components-react/src/image.tsx index 6f98b91a31..b7020f1ff6 100644 --- a/packages/sdk-components-react/src/image.tsx +++ b/packages/sdk-components-react/src/image.tsx @@ -37,7 +37,12 @@ type Props = Omit, "loader">; export const Image = forwardRef, Props>( ({ loading = "lazy", ...props }, ref) => { - const { imageLoader, assetBaseUrl } = useContext(ReactSdkContext); + const { imageLoader, renderer, assetBaseUrl } = useContext(ReactSdkContext); + + if (renderer === "canvas") { + // With disabled cache and loading lazy, chrome may not render the image at all + loading = "eager"; + } if ( props.src === undefined ||