From e76fd7ce9ab4a6adff05f5e816f385e1b5afc316 Mon Sep 17 00:00:00 2001
From: Daniil Demchenko <dan9m@yandex.com>
Date: Wed, 15 Nov 2023 17:50:07 +0300
Subject: [PATCH] feat: lazy loading for userAvatar (#1124)

Co-authored-by: Daniil Demchenko <dandemchenko@yandex-team.ru>
---
 src/components/UserAvatar/README.md           | 19 ++++++++++---------
 src/components/UserAvatar/UserAvatar.tsx      |  7 ++++++-
 .../__stories__/UserAvatar.stories.tsx        | 15 +++++++++++++++
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/components/UserAvatar/README.md b/src/components/UserAvatar/README.md
index 8b79b403bc..17361b72f9 100644
--- 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
index 1a6d406112..66ad3303f9 100644
--- a/src/components/UserAvatar/UserAvatar.tsx
+++ b/src/components/UserAvatar/UserAvatar.tsx
@@ -15,6 +15,7 @@ export interface UserAvatarProps {
     sizes?: string;
     title?: string;
     className?: string;
+    loading?: 'eager' | 'lazy';
     /** @deprecated Use appropriate component, like `<Button/>` instead */
     onClick?: () => void;
 }
@@ -22,7 +23,10 @@ export interface UserAvatarProps {
 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
index d043fefb1d..b92e7d113a 100644
--- 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};