From 541fb7ecfc21c429e9579a2f40a7f54d1576085f Mon Sep 17 00:00:00 2001
From: Simon Ihmig <simon.ihmig@kaliber5.de>
Date: Wed, 25 Dec 2024 13:34:43 +0100
Subject: [PATCH 1/2] Better workaround for lazy loading in FF

FF loads images eagerly when setting src attribute. The previous workaround of delaying can be improved with a much simpler one, by just setting the loading attribute before src.
---
 .../ember/src/components/responsive-image.gts | 20 ++-----------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/packages/ember/src/components/responsive-image.gts b/packages/ember/src/components/responsive-image.gts
index 0e03fe331..d34e0bf94 100644
--- a/packages/ember/src/components/responsive-image.gts
+++ b/packages/ember/src/components/responsive-image.gts
@@ -65,9 +65,6 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
   @tracked
   isLoaded = false;
 
-  @tracked
-  isRendered = false;
-
   constructor(owner: Owner, args: ResponsiveImageComponentSignature['Args']) {
     super(owner, args);
     assert('No @src argument supplied for <ResponsiveImage>', args.src);
@@ -137,13 +134,6 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
    * the image source which fits at best for the size and screen
    */
   get src(): string | undefined {
-    // We *must not* set the src attribute before the <img> is actually rendered, and a child of <picture>
-    // Otherwise some browsers (FF, Safari) will eagerly load it, although the image isn't the one the browser
-    // should load given the other source/srcset variants. Also prevents native lazy loading.
-    if (!this.isRendered && typeof FastBoot === 'undefined') {
-      return undefined;
-    }
-
     const url = this.args.src.imageUrlFor(this.width ?? 640);
     return url;
   }
@@ -229,22 +219,18 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
     this.isLoaded = true;
   }
 
-  @action
-  setRendered(): void {
-    this.isRendered = true;
-  }
-
   <template>
     <picture>
       {{#each this.sourcesSorted as |s|}}
         <source srcset={{s.srcset}} type={{s.mimeType}} sizes={{s.sizes}} />
       {{/each}}
       <img
+        {{! set loading before src, otherwise FF will always load eagerly! }}
+        loading="lazy"
         src={{this.src}}
         width={{this.width}}
         height={{this.height}}
         class={{this.classNames}}
-        loading="lazy"
         decoding="async"
         ...attributes
         data-ri-bh={{this.blurhashMeta.hash}}
@@ -257,8 +243,6 @@ export default class ResponsiveImageComponent extends Component<ResponsiveImageC
           )
         }}
         {{on "load" this.onLoad}}
-        {{! @glint-expect-error }}
-        {{(this.setRendered)}}
       />
     </picture>
   </template>

From 5359bbe68daf6f16521f7297848675f77f97319f Mon Sep 17 00:00:00 2001
From: Simon Ihmig <simon.ihmig@gmail.com>
Date: Wed, 25 Dec 2024 13:41:18 +0100
Subject: [PATCH 2/2] Create lemon-queens-sneeze.md

---
 .changeset/lemon-queens-sneeze.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/lemon-queens-sneeze.md

diff --git a/.changeset/lemon-queens-sneeze.md b/.changeset/lemon-queens-sneeze.md
new file mode 100644
index 000000000..c1698d704
--- /dev/null
+++ b/.changeset/lemon-queens-sneeze.md
@@ -0,0 +1,5 @@
+---
+"@responsive-image/ember": patch
+---
+
+Better workaround for lazy loading issue in Firefox