feat: lazy loading for userAvatar (#1124)

Co-authored-by: Daniil Demchenko <[email protected]>
gravity-ui · Nov 15, 2023 · e76fd7c · e76fd7c
1 parent 3719eb1
commit e76fd7c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/src/components/UserAvatar/README.md b/src/components/UserAvatar/README.md
@@ -4,12 +4,13 @@ Component for displaying user avatar.
 
 ### PropTypes
 
-| Name           | Type             | Required | Default | Description                                                |
-| :------------- | :--------------- | :------- | :------ | :--------------------------------------------------------- |
-| imgUrl         | `string`         |          |         | Link to image                                              |
-| fallbackImgUrl | `string`         |          |         | Link to fallback image                                     |
-| size           | `UserAvatarSize` |          | 'm'     | Component size. Possible values: `xs`, `s`, `m`, `l`, `xl` |
-| srcSet         | `string`         |          |         | `srcSet` attribute of the image                            |
-| sizes          | `string`         |          |         | `sizes` attribute of the image                             |
-| title          | `string`         |          |         | Tooltip text on hover                                      |
-| className      | `string`         |          |         | Class name                                                 |
+| Name           | Type             | Required | Default | Description                                                                                             |
+| :------------- | :--------------- | :------- | :------ | :------------------------------------------------------------------------------------------------------ |
+| imgUrl         | `string`         |          |         | Link to image                                                                                           |
+| fallbackImgUrl | `string`         |          |         | Link to fallback image                                                                                  |
+| size           | `UserAvatarSize` |          | 'm'     | Component size. Possible values: `xs`, `s`, `m`, `l`, `xl`                                              |
+| srcSet         | `string`         |          |         | `srcSet` attribute of the image                                                                         |
+| sizes          | `string`         |          |         | `sizes` attribute of the image                                                                          |
+| title          | `string`         |          |         | Tooltip text on hover                                                                                   |
+| className      | `string`         |          |         | Class name                                                                                              |
+| loading        | `eager \| lazy`  |          |         | The loading attribute specifies whether a browser should load an image immediately or to defer loading. |
diff --git a/src/components/UserAvatar/UserAvatar.tsx b/src/components/UserAvatar/UserAvatar.tsx
@@ -15,14 +15,18 @@ export interface UserAvatarProps {
     sizes?: string;
     title?: string;
     className?: string;
+    loading?: 'eager' | 'lazy';
     /** @deprecated Use appropriate component, like `<Button/>` instead */
     onClick?: () => void;
 }
 
 const b = block('user-avatar');
 
 export const UserAvatar = React.forwardRef<HTMLDivElement, UserAvatarProps>(
-    ({imgUrl, fallbackImgUrl, size = 'm', srcSet, sizes, title, className, onClick}, ref) => {
+    (
+        {imgUrl, fallbackImgUrl, size = 'm', srcSet, sizes, title, className, loading, onClick},
+        ref,
+    ) => {
         const [isErrored, setIsErrored] = React.useState(false);
 
         const handleError = React.useCallback(() => {
@@ -39,6 +43,7 @@ export const UserAvatar = React.forwardRef<HTMLDivElement, UserAvatarProps>(
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <div className={b({size}, className)} title={title} onClick={onClick} ref={ref}>
                 <img
+                    loading={loading}
                     className={b('figure')}
                     width={SIZES[size]}
                     height={SIZES[size]}

diff --git a/src/components/UserAvatar/__stories__/UserAvatar.stories.tsx b/src/components/UserAvatar/__stories__/UserAvatar.stories.tsx
@@ -67,3 +67,18 @@ WithFallback.args = {
     fallbackImgUrl: imgUrl,
     size: 'xl',
 };
+
+export const LazyLoading: StoryFn<UserAvatarProps> = (args) => (
+    <div style={{overflow: 'scroll', height: '100px'}}>
+        {Array(10)
+            .fill(0)
+            .map((_, index) => {
+                return (
+                    <div key={index} style={{padding: '2px'}}>
+                        <UserAvatar imgUrl={`${args.imgUrl}?${index}`} loading="lazy" size="xl" />
+                    </div>
+                );
+            })}
+    </div>
+);
+LazyLoading.args = {imgUrl};