From 89aa535ad02850b53ce1ccee7cbb662c2734a996 Mon Sep 17 00:00:00 2001
From: simonihmig <simon.ihmig@kaliber5.de>
Date: Fri, 5 Feb 2021 12:18:57 +0100
Subject: [PATCH] Enable native lazy loading by default

Closes #89
---
 addon/components/responsive-image.hbs                |  1 +
 .../integration/components/responsive-image-test.js  | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/addon/components/responsive-image.hbs b/addon/components/responsive-image.hbs
index 079089327..71c60a744 100644
--- a/addon/components/responsive-image.hbs
+++ b/addon/components/responsive-image.hbs
@@ -8,6 +8,7 @@
   {{/each}}
   <img
     src={{this.src}}
+    loading="lazy"
     ...attributes
   />
 </picture>
\ No newline at end of file
diff --git a/tests/integration/components/responsive-image-test.js b/tests/integration/components/responsive-image-test.js
index 2590e87b7..4f73bfd57 100644
--- a/tests/integration/components/responsive-image-test.js
+++ b/tests/integration/components/responsive-image-test.js
@@ -166,6 +166,18 @@ module('Integration: Responsive Image Component', function (hooks) {
     );
   });
 
+  test('it loads lazily by default', async function (assert) {
+    await render(hbs`<ResponsiveImage @image="assets/images/test.png" />`);
+    assert.dom('img').hasAttribute('loading', 'lazy');
+  });
+
+  test('it can optionally load eager', async function (assert) {
+    await render(
+      hbs`<ResponsiveImage @image="assets/images/test.png" loading="eager" />`
+    );
+    assert.dom('img').hasAttribute('loading', 'eager');
+  });
+
   test('it renders arbitrary HTML attributes', async function (assert) {
     await render(
       hbs`<ResponsiveImage @image="assets/images/test.png" class="foo" role="button" data-test-image />`