fix(react-utilities): add loading to img element property whitelist

change/@fluentui-react-utilities-2487f27f-0f06-4edf-8046-4f2016681dfd.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Add loading to img element property whitelist",
+  "packageName": "@fluentui/react-utilities",
+  "email": "84954628+lukiod@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-utilities/src/utils/properties.test.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import { getNativeProps, divProperties, inputProperties, anchorProperties, buttonProperties } from './properties';
+import { getNativeProps, divProperties, inputProperties, anchorProperties, buttonProperties, imgProperties } from './properties';
 
 describe('getNativeProps', () => {
   it('can pass through data tags', () => {
@@ -113,6 +113,27 @@ describe('getNativeProps', () => {
     expect(result).not.toHaveProperty('foobar');
   });
 
+  it('can pass through img props including loading', () => {
+    const result = getNativeProps<React.ImgHTMLAttributes<HTMLImageElement>>(
+      {
+        src: 'https://example.com/image.png',
+        alt: 'An image',
+        loading: 'lazy',
+        // Non-img property
+        foobar: 1,
+      },
+      imgProperties,
+    );
+
+    expect(result).toMatchObject({
+      src: 'https://example.com/image.png',
+      alt: 'An image',
+      loading: 'lazy',
+    });
+
+    expect(result).not.toHaveProperty('foobar');
+  });
+
   describe('popover', () => {
     it('allows the popoverTarget attribute on button', () => {
       const result = getNativeProps<React.HTMLAttributes<HTMLButtonElement>>(

packages/react-components/react-utilities/src/utils/properties.ts

@@ -416,6 +416,7 @@ export const imgProperties = toObjectMap(htmlElementProperties, [
   'alt', // area, img, input
   'crossOrigin', // img
   'height', // canvas, embed, iframe, img, input, object, video
+  'loading', // img, iframe
   'src', // audio, embed, iframe, img, input, script, source, track, video
   'srcSet', // img, source
   'useMap', // img, object,