fix: Remove default lazy loading from x-image

.changeset/silly-taxis-dance.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+Remove the default lazy-loading attribute from x-image elements.

.github/lynx-stack.instructions.md

@@ -3,3 +3,4 @@ applyTo: "packages/web-platform/web-elements/**/*"
 ---
 
 When updating web element APIs, add targeted Playwright tests in packages/web-platform/web-elements/tests/web-elements.spec.ts and keep changes minimal.
+Ensure Playwright browsers are installed (pnpm exec playwright install --with-deps <browser>) before running web-elements tests.

packages/web-platform/web-elements/src/elements/htmlTemplates.ts

@@ -94,9 +94,7 @@ export const templateXImage = (attributes: { src?: string }) => {
       'detected <script, this is a potential XSS attack, please check your src',
     );
   }
-  return `<img part="img" alt="" loading="lazy" id="img" ${
-    src ? `src="${src}"` : ''
-  }/> `;
+  return `<img part="img" alt="" id="img" ${src ? `src="${src}"` : ''}/> `;
 };
 
 export const templateFilterImage = templateXImage;

packages/web-platform/web-elements/tests/web-elements.spec.ts

@@ -1711,6 +1711,18 @@ test.describe('web-elements test suite', () => {
       // Verify that the referrerpolicy attribute is set to 'no-referrer' on the internal img element
       expect(referrerpolicyValue).toBe('no-referrer');
     });
+    test('should not have loading attribute by default', async ({ page }) => {
+      const title = 'x-image/basic';
+      await gotoWebComponentPage(page, title);
+
+      const loadingValue = await page.evaluate(() => {
+        const xImage = document.querySelector('x-image');
+        const img = xImage?.shadowRoot?.querySelector('#img');
+        return img?.getAttribute('loading');
+      });
+
+      expect(loadingValue).toBeNull();
+    });
   });
 
   test.describe('x-list', () => {