[Perf] Custom Emoji: Replace SVG placeholder with CSS, do not render highlight catch when not needed

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%;

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
+      {isSelectable && (
-        className={styles.highlightCatch}
+        <img
-        src={blankImg}
+          className={styles.highlightCatch}
-        alt={customEmoji?.emoji}
+          src={blankImg}
-        data-entity-type={ApiMessageEntityTypes.CustomEmoji}
+          alt={customEmoji?.emoji}
-        data-document-id={documentId}
+          data-entity-type={ApiMessageEntityTypes.CustomEmoji}
-        draggable={false}
+          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}

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;

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}