Skip to content

Commit 7db8190

Browse files
feat(Image): loading optimizations (#985)
* feat(Image): loading optimizations * fix(Image): tests * fix(Image): stories
1 parent 49ba174 commit 7db8190

File tree

7 files changed

+40
-10
lines changed

7 files changed

+40
-10
lines changed

src/components/Image/Image.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ const Image = (props: ImageProps) => {
6666
onLoad,
6767
containerClassName,
6868
qa,
69+
fetchPriority,
70+
loading,
6971
} = props;
7072
const [imgLoadingError, setImgLoadingError] = useState(false);
7173

@@ -120,6 +122,8 @@ const Image = (props: ImageProps) => {
120122
alt={alt}
121123
src={src}
122124
style={style}
125+
fetchPriority={fetchPriority}
126+
loading={loading}
123127
onClick={onClick}
124128
onError={() => setImgLoadingError(true)}
125129
onLoad={onLoad}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@ const DefaultTemplate: StoryFn<ImageProps> = (args) => <Image {...args} />;
1515

1616
export const Default = DefaultTemplate.bind({});
1717

18-
Default.args = data.default.content;
18+
Default.args = data.default.content as ImageProps;

src/components/Image/__stories__/data.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"src": "/story-assets/img_6-12_light.png",
55
"alt": "string",
66
"disableCompress": true,
7+
"fetchPriority": "high",
78
"style": {
89
"height": "200px"
910
}

src/components/Image/schema.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@ const ImageBase = {
1111
disableCompress: {
1212
type: 'boolean',
1313
},
14+
loading: {
15+
type: 'string',
16+
enum: ['eager', 'lazy'],
17+
},
18+
fetchPriority: {
19+
type: 'string',
20+
enum: ['high', 'low', 'auto'],
21+
},
1422
};
1523

1624
const StyleBase = {

src/components/ImageBase/ImageBase.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,19 @@ export interface ImageBaseProps extends Partial<ImageObjectProps> {
1111
onError?: () => void;
1212
}
1313

14-
export const ImageBase = (props: ImageBaseProps) => {
14+
export const ImageBase = ({fetchPriority, ...props}: ImageBaseProps) => {
1515
const {Image} = React.useContext(ImageContext);
1616

17-
// eslint-disable-next-line jsx-a11y/alt-text
18-
return Image ? <Image {...props} /> : <img {...props} />;
17+
return Image ? (
18+
<Image fetchPriority={fetchPriority} {...props} />
19+
) : (
20+
// There is an issue with fetchpriority attr in img in React.
21+
// It is still not supported. However it's nice to have ability to manage
22+
// this prop is good to have to improve Core Web Vitals.
23+
// So, here is a workaround to assign the attr.
24+
// eslint-disable-next-line jsx-a11y/alt-text
25+
<img {...{fetchpriority: fetchPriority}} {...props} />
26+
);
1927
};
2028

2129
export default ImageBase;
Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import React from 'react';
22

3-
import {ImageBaseProps} from '../../components';
4-
5-
export type Image = React.ComponentClass<ImageBaseProps> | React.FC<ImageBaseProps>;
3+
import type {ImageBaseProps} from '../../components';
64

75
export type ImageContextProps = {
8-
Image?: Image;
6+
Image?: React.ComponentType<ImageBaseProps>;
97
};
108

119
export const ImageContext = React.createContext<ImageContextProps>({});

src/models/constructor-items/common.ts

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import React, {CSSProperties, HTMLProps, ReactNode} from 'react';
1+
import React, {
2+
CSSProperties,
3+
DetailedHTMLProps,
4+
HTMLProps,
5+
ImgHTMLAttributes,
6+
ReactNode,
7+
} from 'react';
28

39
import {ButtonView, ButtonProps as UikitButtonProps} from '@gravity-ui/uikit';
410

@@ -125,8 +131,13 @@ interface LoopProps {
125131

126132
// images
127133

128-
export interface ImageInfoProps extends Pick<HTMLProps<HTMLImageElement>, 'aria-describedby'> {
134+
export interface ImageInfoProps
135+
extends Pick<
136+
DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
137+
'aria-describedby' | 'loading'
138+
> {
129139
alt?: string;
140+
fetchPriority?: 'high' | 'low' | 'auto';
130141
disableCompress?: boolean;
131142
}
132143

0 commit comments

Comments
 (0)