From 5c23b6b0598a7df573a01d6efcdbf90f1446fce0 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Tue, 11 Jun 2024 19:39:55 +0800
Subject: [PATCH 1/3] always render the popover component

---
 .../home/report/ReactionList/PopoverReactionList/index.tsx    | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/pages/home/report/ReactionList/PopoverReactionList/index.tsx b/src/pages/home/report/ReactionList/PopoverReactionList/index.tsx
index 8d29fe3c52bd..c5e72ebc5095 100644
--- a/src/pages/home/report/ReactionList/PopoverReactionList/index.tsx
+++ b/src/pages/home/report/ReactionList/PopoverReactionList/index.tsx
@@ -23,10 +23,6 @@ function PopoverReactionList(props: unknown, ref: ForwardedRef<ReactionListRef>)
 
     useImperativeHandle(ref, () => ({showReactionList, hideReactionList, isActiveReportAction}));
 
-    if (reactionListReportActionID === '' || reactionListEmojiName === '') {
-        return null;
-    }
-
     return (
         <BasePopoverReactionList
             ref={innerReactionListRef}

From 7e8985fc6c101e2d9552d01923f50dadd1fb14a7 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Tue, 11 Jun 2024 19:40:18 +0800
Subject: [PATCH 2/3] set visible if reportActionID and emojiName is set

---
 .../PopoverReactionList/BasePopoverReactionList.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReactionList/PopoverReactionList/BasePopoverReactionList.tsx b/src/pages/home/report/ReactionList/PopoverReactionList/BasePopoverReactionList.tsx
index 9f024ac92846..851569ec120d 100644
--- a/src/pages/home/report/ReactionList/PopoverReactionList/BasePopoverReactionList.tsx
+++ b/src/pages/home/report/ReactionList/PopoverReactionList/BasePopoverReactionList.tsx
@@ -27,7 +27,7 @@ function BasePopoverReactionList(props: BasePopoverReactionListPropsWithLocalWit
 
     return (
         <PopoverWithMeasuredContent
-            isVisible={isPopoverVisible}
+            isVisible={isPopoverVisible && !!reportActionID && !!emojiName}
             onClose={hideReactionList}
             anchorPosition={popoverAnchorPosition}
             animationIn="fadeIn"

From 6d719bbdb934f5c57847529198790b0cef970f06 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Tue, 11 Jun 2024 20:02:05 +0800
Subject: [PATCH 3/3] only show the popover when the information is ready

---
 src/hooks/useBasePopoverReactionList/index.ts                | 2 ++
 .../PopoverReactionList/BasePopoverReactionList.tsx          | 5 ++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useBasePopoverReactionList/index.ts b/src/hooks/useBasePopoverReactionList/index.ts
index 87c9d23c6e35..90fadc85e785 100644
--- a/src/hooks/useBasePopoverReactionList/index.ts
+++ b/src/hooks/useBasePopoverReactionList/index.ts
@@ -22,6 +22,7 @@ export default function useBasePopoverReactionList({emojiName, emojiReactions, a
                 emojiCodes: [],
                 hasUserReacted: false,
                 users: [],
+                isReady: false,
             };
         }
 
@@ -34,6 +35,7 @@ export default function useBasePopoverReactionList({emojiName, emojiReactions, a
             reactionCount,
             hasUserReacted,
             users,
+            isReady: true,
         };
     }
 
diff --git a/src/pages/home/report/ReactionList/PopoverReactionList/BasePopoverReactionList.tsx b/src/pages/home/report/ReactionList/PopoverReactionList/BasePopoverReactionList.tsx
index 851569ec120d..f9ef4041ba38 100644
--- a/src/pages/home/report/ReactionList/PopoverReactionList/BasePopoverReactionList.tsx
+++ b/src/pages/home/report/ReactionList/PopoverReactionList/BasePopoverReactionList.tsx
@@ -21,13 +21,12 @@ function BasePopoverReactionList(props: BasePopoverReactionListPropsWithLocalWit
         preferredLocale,
     });
     // Get the reaction information
-    const {emojiCodes, reactionCount, hasUserReacted, users} = getReactionInformation();
-
+    const {emojiCodes, reactionCount, hasUserReacted, users, isReady} = getReactionInformation();
     useImperativeHandle(ref, () => ({hideReactionList, showReactionList}));
 
     return (
         <PopoverWithMeasuredContent
-            isVisible={isPopoverVisible && !!reportActionID && !!emojiName}
+            isVisible={isPopoverVisible && isReady}
             onClose={hideReactionList}
             anchorPosition={popoverAnchorPosition}
             animationIn="fadeIn"