feat(Image): loading optimizations (#985)

* feat(Image): loading optimizations

* fix(Image): tests

* fix(Image): stories

Author: DC-RomanKarpov

src/components/Image/Image.tsx

@@ -66,6 +66,8 @@ const Image = (props: ImageProps) => {
         onLoad,
         containerClassName,
         qa,
+        fetchPriority,
+        loading,
     } = props;
     const [imgLoadingError, setImgLoadingError] = useState(false);
 
@@ -120,6 +122,8 @@ const Image = (props: ImageProps) => {
                 alt={alt}
                 src={src}
                 style={style}
+                fetchPriority={fetchPriority}
+                loading={loading}
                 onClick={onClick}
                 onError={() => setImgLoadingError(true)}
                 onLoad={onLoad}

src/components/Image/__stories__/Image.stories.tsx

@@ -15,4 +15,4 @@ const DefaultTemplate: StoryFn<ImageProps> = (args) => <Image {...args} />;
 
 export const Default = DefaultTemplate.bind({});
 
-Default.args = data.default.content;
+Default.args = data.default.content as ImageProps;

src/components/Image/__stories__/data.json

@@ -4,6 +4,7 @@
       "src": "/story-assets/img_6-12_light.png",
       "alt": "string",
       "disableCompress": true,
+      "fetchPriority": "high",
       "style": {
         "height": "200px"
       }

src/components/Image/schema.ts

@@ -11,6 +11,14 @@ const ImageBase = {
     disableCompress: {
         type: 'boolean',
     },
+    loading: {
+        type: 'string',
+        enum: ['eager', 'lazy'],
+    },
+    fetchPriority: {
+        type: 'string',
+        enum: ['high', 'low', 'auto'],
+    },
 };
 
 const StyleBase = {

src/components/ImageBase/ImageBase.tsx

@@ -11,11 +11,19 @@ export interface ImageBaseProps extends Partial<ImageObjectProps> {
     onError?: () => void;
 }
 
-export const ImageBase = (props: ImageBaseProps) => {
+export const ImageBase = ({fetchPriority, ...props}: ImageBaseProps) => {
     const {Image} = React.useContext(ImageContext);
 
-    // eslint-disable-next-line jsx-a11y/alt-text
-    return Image ? <Image {...props} /> : <img {...props} />;
+    return Image ? (
+        <Image fetchPriority={fetchPriority} {...props} />
+    ) : (
+        // There is an issue with fetchpriority attr in img in React.
+        // It is still not supported. However it's nice to have ability to manage
+        // this prop is good to have to improve Core Web Vitals.
+        // So, here is a workaround to assign the attr.
+        // eslint-disable-next-line jsx-a11y/alt-text
+        <img {...{fetchpriority: fetchPriority}} {...props} />
+    );
 };
 
 export default ImageBase;

src/context/imageContext/imageContext.ts

@@ -1,11 +1,9 @@
 import React from 'react';
 
-import {ImageBaseProps} from '../../components';
-
-export type Image = React.ComponentClass<ImageBaseProps> | React.FC<ImageBaseProps>;
+import type {ImageBaseProps} from '../../components';
 
 export type ImageContextProps = {
-    Image?: Image;
+    Image?: React.ComponentType<ImageBaseProps>;
 };
 
 export const ImageContext = React.createContext<ImageContextProps>({});

src/models/constructor-items/common.ts

@@ -1,4 +1,10 @@
-import React, {CSSProperties, HTMLProps, ReactNode} from 'react';
+import React, {
+    CSSProperties,
+    DetailedHTMLProps,
+    HTMLProps,
+    ImgHTMLAttributes,
+    ReactNode,
+} from 'react';
 
 import {ButtonView, ButtonProps as UikitButtonProps} from '@gravity-ui/uikit';
 
@@ -125,8 +131,13 @@ interface LoopProps {
 
 // images
 
-export interface ImageInfoProps extends Pick<HTMLProps<HTMLImageElement>, 'aria-describedby'> {
+export interface ImageInfoProps
+    extends Pick<
+        DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
+        'aria-describedby' | 'loading'
+    > {
     alt?: string;
+    fetchPriority?: 'high' | 'low' | 'auto';
     disableCompress?: boolean;
 }