From f1f776fff5899c452315b7976f4e1bffec757f3c Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 6 Sep 2024 15:42:41 +0200
Subject: [PATCH] [Perf] Custom Emoji: Replace SVG placeholder with CSS, do not
 render highlight catch when not needed

---
 src/components/common/CustomEmoji.module.scss |  7 ++++
 src/components/common/CustomEmoji.tsx         | 34 ++++++++++---------
 .../helpers/renderActionMessageText.tsx       |  4 +--
 .../common/helpers/renderTextWithEntities.tsx |  2 ++
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/common/CustomEmoji.module.scss b/src/components/common/CustomEmoji.module.scss
index 24416edc9..f3bb416c8 100644
--- a/src/components/common/CustomEmoji.module.scss
+++ b/src/components/common/CustomEmoji.module.scss
@@ -11,6 +11,13 @@
   }
 }
 
+.placeholder {
+  width: 90%;
+  height: 90%;
+  background-color: #77777719;
+  border-radius: 0.3125rem !important;
+}
+
 .thumb {
   width: 100%;
   height: 100%;
diff --git a/src/components/common/CustomEmoji.tsx b/src/components/common/CustomEmoji.tsx
index fba5d293b..24a5746b8 100644
--- a/src/components/common/CustomEmoji.tsx
+++ b/src/components/common/CustomEmoji.tsx
@@ -1,4 +1,4 @@
-import type { FC, TeactNode } from '../../lib/teact/teact';
+import type { FC } from '../../lib/teact/teact';
 import React, { memo, useRef, useState } from '../../lib/teact/teact';
 import { getGlobal } from '../../global';
 
@@ -18,18 +18,17 @@ import StickerView from './StickerView';
 import styles from './CustomEmoji.module.scss';
 
 import blankImg from '../../assets/blank.png';
-import svgPlaceholder from '../../assets/square.svg';
 
 type OwnProps = {
   ref?: React.RefObject<HTMLDivElement>;
   documentId: string;
-  children?: TeactNode;
-  size?: number;
   className?: string;
-  loopLimit?: number;
   style?: string;
+  size?: number;
   isBig?: boolean;
   noPlay?: boolean;
+  loopLimit?: number;
+  isSelectable?: boolean;
   withSharedAnimation?: boolean;
   sharedCanvasRef?: React.RefObject<HTMLCanvasElement>;
   sharedCanvasHqRef?: React.RefObject<HTMLCanvasElement>;
@@ -48,12 +47,13 @@ const STICKER_SIZE = 20;
 const CustomEmoji: FC<OwnProps> = ({
   ref,
   documentId,
+  className,
+  style,
   size = STICKER_SIZE,
   isBig,
   noPlay,
-  className,
   loopLimit,
-  style,
+  isSelectable,
   withSharedAnimation,
   sharedCanvasRef,
   sharedCanvasHqRef,
@@ -123,16 +123,18 @@ const CustomEmoji: FC<OwnProps> = ({
       data-alt={customEmoji?.emoji}
       style={style}
     >
-      <img
-        className={styles.highlightCatch}
-        src={blankImg}
-        alt={customEmoji?.emoji}
-        data-entity-type={ApiMessageEntityTypes.CustomEmoji}
-        data-document-id={documentId}
-        draggable={false}
-      />
+      {isSelectable && (
+        <img
+          className={styles.highlightCatch}
+          src={blankImg}
+          alt={customEmoji?.emoji}
+          data-entity-type={ApiMessageEntityTypes.CustomEmoji}
+          data-document-id={documentId}
+          draggable={false}
+        />
+      )}
       {!customEmoji ? (
-        <img className={styles.thumb} src={svgPlaceholder} alt="Emoji" draggable={false} />
+        <div className={buildClassName(styles.placeholder)} draggable={false} />
       ) : (
         <StickerView
           containerRef={containerRef}
diff --git a/src/components/common/helpers/renderActionMessageText.tsx b/src/components/common/helpers/renderActionMessageText.tsx
index 5b22926d9..a361f0d69 100644
--- a/src/components/common/helpers/renderActionMessageText.tsx
+++ b/src/components/common/helpers/renderActionMessageText.tsx
@@ -134,7 +134,7 @@ export function renderActionMessageText(
 
   if (unprocessed.includes('%action_topic%')) {
     const topicEmoji = topic?.iconEmojiId
-      ? <CustomEmoji documentId={topic.iconEmojiId} />
+      ? <CustomEmoji documentId={topic.iconEmojiId} isSelectable />
       : '';
     const topicString = topic ? `${topic.title}` : 'a topic';
     processed = processPlaceholder(
@@ -153,7 +153,7 @@ export function renderActionMessageText(
     processed = processPlaceholder(
       unprocessed,
       '%action_topic_icon%',
-      hasIcon ? <CustomEmoji documentId={topicIcon!} />
+      hasIcon ? <CustomEmoji documentId={topicIcon!} isSelectable />
         : topic ? <TopicDefaultIcon topicId={topic!.id} title={topic!.title} /> : '...',
     );
     unprocessed = processed.pop() as string;
diff --git a/src/components/common/helpers/renderTextWithEntities.tsx b/src/components/common/helpers/renderTextWithEntities.tsx
index 11e71a158..6d2632eb0 100644
--- a/src/components/common/helpers/renderTextWithEntities.tsx
+++ b/src/components/common/helpers/renderTextWithEntities.tsx
@@ -439,6 +439,7 @@ function processEntity({
           key={cacheBuster ? `${cacheBuster}-${entity.offset}` : undefined}
           documentId={entity.documentId}
           size={emojiSize}
+          isSelectable
           withSharedAnimation
           sharedCanvasRef={sharedCanvasRef}
           sharedCanvasHqRef={sharedCanvasHqRef}
@@ -568,6 +569,7 @@ function processEntity({
           key={cacheBuster ? `${cacheBuster}-${entity.offset}` : undefined}
           documentId={entity.documentId}
           size={emojiSize}
+          isSelectable
           withSharedAnimation
           sharedCanvasRef={sharedCanvasRef}
           sharedCanvasHqRef={sharedCanvasHqRef}