From cd055732bac892acf8bd0d1f91d1ba3b4e1fe8c8 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sat, 19 Mar 2022 21:18:54 +0100
Subject: [PATCH] [Perf] Profile: Get rid of redundant blur

---
 src/components/common/ProfileInfo.scss            |  4 ----
 src/components/common/ProfileInfo.tsx             |  2 +-
 src/components/common/ProfilePhoto.scss           |  9 +--------
 src/components/common/ProfilePhoto.tsx            | 15 ++++-----------
 .../mediaViewer/helpers/ghostAnimation.ts         |  6 +++---
 5 files changed, 9 insertions(+), 27 deletions(-)

diff --git a/src/components/common/ProfileInfo.scss b/src/components/common/ProfileInfo.scss
index d8a5e2dbb..af06770fa 100644
--- a/src/components/common/ProfileInfo.scss
+++ b/src/components/common/ProfileInfo.scss
@@ -169,10 +169,6 @@
       margin: 0;
     }
 
-    .prev-avatar-media {
-      z-index: 0;
-    }
-
     .info {
       padding-bottom: 0.75rem;
     }
diff --git a/src/components/common/ProfileInfo.tsx b/src/components/common/ProfileInfo.tsx
index 2426a08ef..e902d63b4 100644
--- a/src/components/common/ProfileInfo.tsx
+++ b/src/components/common/ProfileInfo.tsx
@@ -108,7 +108,7 @@ const ProfileInfo: FC<OwnProps & StateProps> = ({
     setCurrentPhotoIndex(currentPhotoIndex + 1);
   }, [currentPhotoIndex, isLast]);
 
-  // Support for swipe gestures and closing on click
+  // Swipe gestures
   useEffect(() => {
     const element = document.querySelector<HTMLDivElement>('.photo-wrapper');
     if (!element) {
diff --git a/src/components/common/ProfilePhoto.scss b/src/components/common/ProfilePhoto.scss
index d66a97de7..7874df10d 100644
--- a/src/components/common/ProfilePhoto.scss
+++ b/src/components/common/ProfilePhoto.scss
@@ -4,18 +4,11 @@
   cursor: pointer;
   position: relative;
 
-  img:not(.emoji) {
+  .avatar-media {
     width: 100%;
     object-fit: cover;
   }
 
-  .prev-avatar-media {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: -1;
-  }
-
   .spinner-wrapper {
     width: 100%;
     height: 100%;
diff --git a/src/components/common/ProfilePhoto.tsx b/src/components/common/ProfilePhoto.tsx
index 5ab947a6b..1c6282466 100644
--- a/src/components/common/ProfilePhoto.tsx
+++ b/src/components/common/ProfilePhoto.tsx
@@ -17,8 +17,6 @@ import renderText from './helpers/renderText';
 import buildClassName from '../../util/buildClassName';
 import { getFirstLetters } from '../../util/textFormat';
 import useMedia from '../../hooks/useMedia';
-import useBlurSync from '../../hooks/useBlurSync';
-import usePrevious from '../../hooks/usePrevious';
 import useLang from '../../hooks/useLang';
 
 import Spinner from '../ui/Spinner';
@@ -68,9 +66,7 @@ const ProfilePhoto: FC<OwnProps> = ({
   const photoBlobUrl = useMedia(getMediaHash('big'), false, ApiMediaFormat.BlobUrl, lastSyncTime);
   const avatarMediaHash = isFirstPhoto && !photoBlobUrl ? getMediaHash('normal', true) : undefined;
   const avatarBlobUrl = useMedia(avatarMediaHash, false, ApiMediaFormat.BlobUrl, lastSyncTime);
-  const thumbDataUri = useBlurSync(!photoBlobUrl && photo && photo.thumbnail && photo.thumbnail.dataUri);
-  const imageSrc = photoBlobUrl || avatarBlobUrl || thumbDataUri;
-  const prevImageSrc = usePrevious(imageSrc);
+  const imageSrc = photoBlobUrl || avatarBlobUrl || photo?.thumbnail?.dataUri;
 
   let content: string | undefined = '';
 
@@ -81,11 +77,11 @@ const ProfilePhoto: FC<OwnProps> = ({
   } else if (isRepliesChat) {
     content = <i className="icon-reply-filled" />;
   } else if (imageSrc) {
-    content = <img src={imageSrc} className="avatar-media" alt="" decoding="async" />;
-  } else if (!imageSrc && user) {
+    content = <img src={imageSrc} className="avatar-media" alt="" />;
+  } else if (user) {
     const userFullName = getUserFullName(user);
     content = userFullName ? getFirstLetters(userFullName, 2) : undefined;
-  } else if (!imageSrc && chat) {
+  } else if (chat) {
     const title = getChatTitle(lang, chat);
     content = title && getFirstLetters(title, isUserId(chat.id) ? 2 : 1);
   } else {
@@ -107,9 +103,6 @@ const ProfilePhoto: FC<OwnProps> = ({
 
   return (
     <div className={fullClassName} onClick={imageSrc ? onClick : undefined}>
-      {prevImageSrc && imageSrc && prevImageSrc !== imageSrc && (
-        <img src={prevImageSrc} className="prev-avatar-media" alt="" decoding="async" />
-      )}
       {typeof content === 'string' ? renderText(content, ['hq_emoji']) : content}
     </div>
   );
diff --git a/src/components/mediaViewer/helpers/ghostAnimation.ts b/src/components/mediaViewer/helpers/ghostAnimation.ts
index b0ca4ac4d..3d3ed2271 100644
--- a/src/components/mediaViewer/helpers/ghostAnimation.ts
+++ b/src/components/mediaViewer/helpers/ghostAnimation.ts
@@ -323,17 +323,17 @@ function getNodes(origin: MediaViewerOrigin, message?: ApiMessage) {
 
     case MediaViewerOrigin.MiddleHeaderAvatar:
       containerSelector = '.MiddleHeader .Transition__slide--active .ChatInfo .Avatar';
-      mediaSelector = 'img.avatar-media';
+      mediaSelector = '.avatar-media';
       break;
 
     case MediaViewerOrigin.SettingsAvatar:
       containerSelector = '#Settings .ProfileInfo .Transition__slide--active .ProfilePhoto';
-      mediaSelector = 'img.avatar-media';
+      mediaSelector = '.avatar-media';
       break;
 
     case MediaViewerOrigin.ProfileAvatar:
       containerSelector = '#RightColumn .ProfileInfo .Transition__slide--active .ProfilePhoto';
-      mediaSelector = 'img.avatar-media';
+      mediaSelector = '.avatar-media';
       break;
 
     case MediaViewerOrigin.ScheduledInline: