From f4d7e36579d7ec2d4e44dcd240ac3a8e030b1e2a Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 14 Dec 2024 17:55:10 +0530
Subject: [PATCH] fix message placeholder flickering

---
 .../placeholder/CompactPlaceholder.tsx        | 41 +++++++------
 .../placeholder/DefaultPlaceholder.tsx        | 59 +++++++++----------
 src/app/features/room/RoomTimeline.tsx        | 32 +++++-----
 3 files changed, 64 insertions(+), 68 deletions(-)

diff --git a/src/app/components/message/placeholder/CompactPlaceholder.tsx b/src/app/components/message/placeholder/CompactPlaceholder.tsx
index ffe62c51..e6168ae3 100644
--- a/src/app/components/message/placeholder/CompactPlaceholder.tsx
+++ b/src/app/components/message/placeholder/CompactPlaceholder.tsx
@@ -1,28 +1,27 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { as, ContainerColor, toRem } from 'folds';
 import { randomNumberBetween } from '../../../utils/common';
 import { LinePlaceholder } from './LinePlaceholder';
 import { CompactLayout } from '../layout';
 
 export const CompactPlaceholder = as<'div', { variant?: ContainerColor }>(
-  ({ variant, ...props }, ref) => (
-    <CompactLayout
-      {...props}
-      ref={ref}
-      before={
-        <>
-          <LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
-          <LinePlaceholder
-            variant={variant}
-            style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }}
-          />
-        </>
-      }
-    >
-      <LinePlaceholder
-        variant={variant}
-        style={{ maxWidth: toRem(randomNumberBetween(120, 500)) }}
-      />
-    </CompactLayout>
-  )
+  ({ variant, ...props }, ref) => {
+    const nameSize = useMemo(() => randomNumberBetween(40, 100), []);
+    const msgSize = useMemo(() => randomNumberBetween(120, 500), []);
+
+    return (
+      <CompactLayout
+        {...props}
+        ref={ref}
+        before={
+          <>
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(nameSize) }} />
+          </>
+        }
+      >
+        <LinePlaceholder variant={variant} style={{ maxWidth: toRem(msgSize) }} />
+      </CompactLayout>
+    );
+  }
 );
diff --git a/src/app/components/message/placeholder/DefaultPlaceholder.tsx b/src/app/components/message/placeholder/DefaultPlaceholder.tsx
index 2693d0d5..725ac4b9 100644
--- a/src/app/components/message/placeholder/DefaultPlaceholder.tsx
+++ b/src/app/components/message/placeholder/DefaultPlaceholder.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, useMemo } from 'react';
 import { Avatar, Box, ContainerColor, as, color, toRem } from 'folds';
 import { randomNumberBetween } from '../../../utils/common';
 import { LinePlaceholder } from './LinePlaceholder';
@@ -7,36 +7,33 @@ import { ModernLayout } from '../layout';
 const contentMargin: CSSProperties = { marginTop: toRem(3) };
 
 export const DefaultPlaceholder = as<'div', { variant?: ContainerColor }>(
-  ({ variant, ...props }, ref) => (
-    <ModernLayout
-      {...props}
-      ref={ref}
-      before={
-        <Avatar
-          style={{ backgroundColor: color[variant ?? 'SurfaceVariant'].Container }}
-          size="300"
-        />
-      }
-    >
-      <Box style={contentMargin} grow="Yes" direction="Column" gap="200">
-        <Box grow="Yes" gap="200" alignItems="Center" justifyContent="SpaceBetween">
-          <LinePlaceholder
-            variant={variant}
-            style={{ maxWidth: toRem(randomNumberBetween(40, 100)) }}
+  ({ variant, ...props }, ref) => {
+    const nameSize = useMemo(() => randomNumberBetween(40, 100), []);
+    const msgSize = useMemo(() => randomNumberBetween(80, 200), []);
+    const msg2Size = useMemo(() => randomNumberBetween(80, 200), []);
+
+    return (
+      <ModernLayout
+        {...props}
+        ref={ref}
+        before={
+          <Avatar
+            style={{ backgroundColor: color[variant ?? 'SurfaceVariant'].Container }}
+            size="300"
           />
-          <LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
+        }
+      >
+        <Box style={contentMargin} grow="Yes" direction="Column" gap="200">
+          <Box grow="Yes" gap="200" alignItems="Center" justifyContent="SpaceBetween">
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(nameSize) }} />
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(50) }} />
+          </Box>
+          <Box grow="Yes" gap="200" wrap="Wrap">
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(msgSize) }} />
+            <LinePlaceholder variant={variant} style={{ maxWidth: toRem(msg2Size) }} />
+          </Box>
         </Box>
-        <Box grow="Yes" gap="200" wrap="Wrap">
-          <LinePlaceholder
-            variant={variant}
-            style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }}
-          />
-          <LinePlaceholder
-            variant={variant}
-            style={{ maxWidth: toRem(randomNumberBetween(80, 200)) }}
-          />
-        </Box>
-      </Box>
-    </ModernLayout>
-  )
+      </ModernLayout>
+    );
+  }
 );
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 88dd5256..63b3d3e2 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -1555,31 +1555,31 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             (messageLayout === 1 ? (
               <>
                 <MessageBase>
-                  <CompactPlaceholder />
+                  <CompactPlaceholder key={getItems().length} />
                 </MessageBase>
                 <MessageBase>
-                  <CompactPlaceholder />
+                  <CompactPlaceholder key={getItems().length} />
                 </MessageBase>
                 <MessageBase>
-                  <CompactPlaceholder />
+                  <CompactPlaceholder key={getItems().length} />
                 </MessageBase>
                 <MessageBase>
-                  <CompactPlaceholder />
+                  <CompactPlaceholder key={getItems().length} />
                 </MessageBase>
                 <MessageBase ref={observeBackAnchor}>
-                  <CompactPlaceholder />
+                  <CompactPlaceholder key={getItems().length} />
                 </MessageBase>
               </>
             ) : (
               <>
                 <MessageBase>
-                  <DefaultPlaceholder />
+                  <DefaultPlaceholder key={getItems().length} />
                 </MessageBase>
                 <MessageBase>
-                  <DefaultPlaceholder />
+                  <DefaultPlaceholder key={getItems().length} />
                 </MessageBase>
                 <MessageBase ref={observeBackAnchor}>
-                  <DefaultPlaceholder />
+                  <DefaultPlaceholder key={getItems().length} />
                 </MessageBase>
               </>
             ))}
@@ -1590,31 +1590,31 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             (messageLayout === 1 ? (
               <>
                 <MessageBase ref={observeFrontAnchor}>
-                  <CompactPlaceholder />
+                  <CompactPlaceholder key={getItems().length} />
                 </MessageBase>
                 <MessageBase>
-                  <CompactPlaceholder />
+                  <CompactPlaceholder key={getItems().length} />
                 </MessageBase>
                 <MessageBase>
-                  <CompactPlaceholder />
+                  <CompactPlaceholder key={getItems().length} />
                 </MessageBase>
                 <MessageBase>
-                  <CompactPlaceholder />
+                  <CompactPlaceholder key={getItems().length} />
                 </MessageBase>
                 <MessageBase>
-                  <CompactPlaceholder />
+                  <CompactPlaceholder key={getItems().length} />
                 </MessageBase>
               </>
             ) : (
               <>
                 <MessageBase ref={observeFrontAnchor}>
-                  <DefaultPlaceholder />
+                  <DefaultPlaceholder key={getItems().length} />
                 </MessageBase>
                 <MessageBase>
-                  <DefaultPlaceholder />
+                  <DefaultPlaceholder key={getItems().length} />
                 </MessageBase>
                 <MessageBase>
-                  <DefaultPlaceholder />
+                  <DefaultPlaceholder key={getItems().length} />
                 </MessageBase>
               </>
             ))}