Update option on image changed

addons/html_builder/static/src/core/utils/load_img_component.js

@@ -0,0 +1,28 @@
+import { onWillStart } from "@odoo/owl";
+import { BuilderComponent } from "../building_blocks/builder_component";
+
+export class LoadImgComponent extends BuilderComponent {
+    static template = "html_builder.LoadImgComponent";
+    static props = { slots: { type: Object } };
+
+    setup() {
+        super.setup();
+        onWillStart(async () => {
+            const editingElements = this.env.getEditingElements();
+            const promises = [];
+            for (const editingEl of editingElements) {
+                const imageEls = editingEl.querySelectorAll("img");
+                for (const imageEl of imageEls) {
+                    if (!imageEl.complete) {
+                        promises.push(
+                            new Promise((resolve) => {
+                                imageEl.addEventListener("load", () => resolve());
+                            })
+                        );
+                    }
+                }
+            }
+            await Promise.all(promises);
+        });
+    }
+}

addons/html_builder/static/src/core/utils/load_img_component.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.LoadImgComponent">
+    <t t-slot="default"/>
+</t>
+</templates>

addons/html_builder/static/src/core/utils/update_on_img_changed.js

@@ -0,0 +1,27 @@
+import { BuilderComponent } from "../building_blocks/builder_component";
+import { useDomState } from "../utils";
+import { LoadImgComponent } from "./load_img_component";
+
+export class UpdateOptionOnImgChanged extends BuilderComponent {
+    static template = "html_builder.UpdateOptionOnImgChanged";
+    static props = { slots: { type: Object } };
+    static components = { LoadImgComponent };
+
+    setup() {
+        super.setup();
+        let boolean = true;
+        this.state = useDomState((editingElement) => {
+            const imageEls = editingElement.querySelectorAll("img");
+            for (const imageEl of imageEls) {
+                if (!imageEl.complete) {
+                    // Rerender the slot if an image is not loaded
+                    boolean = !boolean;
+                    break;
+                }
+            }
+            return {
+                bool: boolean,
+            };
+        });
+    }
+}

addons/html_builder/static/src/core/utils/update_on_img_changed.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.UpdateOptionOnImgChanged">
+    <!-- TODO: this is a hack until <t t-key="state.count" t-slot="default"/> is
+     fixed in OWL -->
+    <t t-if="state.bool" t-call="html_builder.LoadImg"/>
+    <t t-else="" t-call="html_builder.LoadImg"/>
+</t>
+
+<t t-name="html_builder.LoadImg">
+    <LoadImgComponent>
+        <t t-slot="default"/>
+    </LoadImgComponent>
+</t>
+</templates>

addons/html_builder/static/src/website_builder/plugins/options/card_option.js

@@ -3,6 +3,7 @@ import { WebsiteBackgroundOption } from "@html_builder/website_builder/plugins/o
 import { CardImageOption } from "./card_image_option";
 import { BorderConfigurator } from "@html_builder/plugins/border_configurator_option";
 import { ShadowOption } from "@html_builder/plugins/shadow_option";
+import { UpdateOptionOnImgChanged } from "@html_builder/core/utils/update_on_img_changed";
 
 export class CardOption extends BaseOptionComponent {
     static template = "website.CardOption";
@@ -11,6 +12,7 @@ export class CardOption extends BaseOptionComponent {
         WebsiteBackgroundOption,
         BorderConfigurator,
         ShadowOption,
+        UpdateOptionOnImgChanged,
     };
     static props = {
         disableWidth: { type: Boolean, optional: true },

addons/html_builder/static/src/website_builder/plugins/options/card_option.xml

@@ -11,7 +11,9 @@
     <BorderConfigurator label.translate="Border"/>
     <ShadowOption/>
     <t t-if="!this.props.disableWidth" t-call="website.CardWidthOption"/>
-    <CardImageOption/>
+    <UpdateOptionOnImgChanged>
+        <CardImageOption/>
+    </UpdateOptionOnImgChanged>
 </t>
 
 </templates>