PLT-6147 Fixed reactions not rendering properly while loading (#5958)

webapp/components/post_view/components/reaction_list_container.jsx

@@ -81,16 +81,12 @@ export default class ReactionListContainer extends React.Component {
     }
 
     render() {
-        if (this.props.post.has_reactions && this.state.reactions.length > 0) {
-            return (
-                <ReactionListView
-                    post={this.props.post}
-                    reactions={this.state.reactions}
-                    emojis={this.state.emojis}
-                />
-            );
-        }
-
-        return null;
+        return (
+            <ReactionListView
+                post={this.props.post}
+                reactions={this.state.reactions}
+                emojis={this.state.emojis}
+            />
+        );
     }
 }

webapp/components/post_view/components/reaction_list_view.jsx

@@ -13,17 +13,23 @@ export default class ReactionListView extends React.Component {
     }
 
     render() {
+        if (!this.props.post.has_reactions || (this.props.reactions && this.props.reactions.length === 0)) {
+            return null;
+        }
+
         const reactionsByName = new Map();
         const emojiNames = [];
 
-        for (const reaction of this.props.reactions) {
-            const emojiName = reaction.emoji_name;
+        if (this.props.reactions) {
+            for (const reaction of this.props.reactions) {
+                const emojiName = reaction.emoji_name;
 
-            if (reactionsByName.has(emojiName)) {
-                reactionsByName.get(emojiName).push(reaction);
-            } else {
-                emojiNames.push(emojiName);
-                reactionsByName.set(emojiName, [reaction]);
+                if (reactionsByName.has(emojiName)) {
+                    reactionsByName.get(emojiName).push(reaction);
+                } else {
+                    emojiNames.push(emojiName);
+                    reactionsByName.set(emojiName, [reaction]);
+                }
             }
         }