From 93c1ecd12d88dbd3da3af863f8398e860497e6bf Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 28 Aug 2017 16:25:26 -0300
Subject: [PATCH 01/11] My Comment Reactions

---
 client/coral-framework/utils/index.js         |  8 +++++++
 .../containers/ProfileContainer.js            |  5 ++++
 client/talk-plugin-history/Comment.css        | 11 +++++++--
 client/talk-plugin-history/Comment.js         | 24 ++++++++++++++-----
 4 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/client/coral-framework/utils/index.js b/client/coral-framework/utils/index.js
index 533ed85db..df264d360 100644
--- a/client/coral-framework/utils/index.js
+++ b/client/coral-framework/utils/index.js
@@ -184,3 +184,11 @@ export function getShallowChanges(a, b) {
   return union(Object.keys(a), Object.keys(b))
     .filter((key) => a[key] !== b[key]);
 }
+
+export function getTotalReactionsCount(actionSummaries) {
+  return actionSummaries
+    .filter((s) => s.__typename !== 'FlagActionSummary')
+    .reduce((total, summary) => {
+      return total + summary.count;
+    }, 0);
+}
diff --git a/client/coral-settings/containers/ProfileContainer.js b/client/coral-settings/containers/ProfileContainer.js
index f5ea64005..907839a92 100644
--- a/client/coral-settings/containers/ProfileContainer.js
+++ b/client/coral-settings/containers/ProfileContainer.js
@@ -108,6 +108,11 @@ const CommentFragment = gql`
     nodes {
       id
       body
+      replyCount
+	    action_summaries {
+        count
+        __typename
+      }
       asset {
         id
         title
diff --git a/client/talk-plugin-history/Comment.css b/client/talk-plugin-history/Comment.css
index 646e1f054..ba63aaeb1 100644
--- a/client/talk-plugin-history/Comment.css
+++ b/client/talk-plugin-history/Comment.css
@@ -6,6 +6,7 @@
   display: flex;
   align-items: baseline;
   justify-content: space-between;
+  padding-bottom: 20px;
 }
 
 .myComment:last-child {
@@ -16,11 +17,17 @@
   text-decoration: none;
   font-weight: bold;
   font-size: 12px;
-  color: #2c3e50;
+  color: #757575;
 }
 
-.commentBody {
+.commentSummary {
+  font-size: 14px;
+  margin: 30px 0 10px;
+  color: #424242;
+}
 
+.commentSummaryReactions {
+  margin-right: 5px;
 }
 
 .sidebar {
diff --git a/client/talk-plugin-history/Comment.js b/client/talk-plugin-history/Comment.js
index 4cf9d875c..f3bb47914 100644
--- a/client/talk-plugin-history/Comment.js
+++ b/client/talk-plugin-history/Comment.js
@@ -4,6 +4,8 @@ import styles from './Comment.css';
 import Slot from 'coral-framework/components/Slot';
 import PubDate from '../talk-plugin-pubdate/PubDate';
 import CommentContent from '../coral-embed-stream/src/components/CommentContent';
+import cn from 'classnames';
+import {getTotalReactionsCount} from 'coral-framework/utils';
 
 import t from 'coral-framework/services/i18n';
 
@@ -11,24 +13,34 @@ class Comment extends React.Component {
 
   render() {
     const {comment, link, data, root} = this.props;
+    // console.log(comment.action_summaries, getTotalReactionsCount(comment.action_summaries));
+
     return (
       <div className={styles.myComment}>
         <div>
           <Slot
             fill="commentContent"
             defaultComponent={CommentContent}
-            className={`${styles.commentBody} myCommentBody`}
+            className={cn(styles.commentBody, 'my-comment-body')}
             data={data}
             queryData={{root, comment, asset: comment.asset}}
           />
-          <p className="myCommentAsset">
-            <a
-              className={`${styles.assetURL} myCommentAnchor`}
+          <div className={cn(styles.commentSummary, 'comment_summary')}>
+            <span className={cn(styles.commentSummaryReactions, 'comment_summary_reactions')}>
+              <Icon name="thumb_up" /> {getTotalReactionsCount(comment.action_summaries)} reactions
+            </span>
+            
+            <span className={cn('comment_summary_replies')}>
+              <Icon name="reply" /> {comment.replyCount} replies
+            </span>
+          </div>
+          <div className="my-comment-asset">
+            <a className={cn(styles.assetURL, 'my-comment-anchor')}
               href="#"
               onClick={link(`${comment.asset.url}`)}>
               Story: {comment.asset.title ? comment.asset.title : comment.asset.url}
             </a>
-          </p>
+          </div>
         </div>
         <div className={styles.sidebar}>
           <ul>
@@ -38,7 +50,7 @@ class Comment extends React.Component {
               </a>
             </li>
             <li>
-              <Icon name="schedule" className={styles.iconDate}/>
+              <Icon name="schedule" className={styles.iconDate} />
               <PubDate
                 className={styles.pubdate}
                 created_at={comment.created_at}

From 3e045291eed7680655565f0543922d86101b1d75 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 28 Aug 2017 16:30:17 -0300
Subject: [PATCH 02/11] Translations added

---
 client/talk-plugin-history/Comment.js | 8 +++-----
 locales/en.yml                        | 3 +++
 locales/es.yml                        | 3 +++
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/talk-plugin-history/Comment.js b/client/talk-plugin-history/Comment.js
index f3bb47914..c9851b43c 100644
--- a/client/talk-plugin-history/Comment.js
+++ b/client/talk-plugin-history/Comment.js
@@ -13,7 +13,6 @@ class Comment extends React.Component {
 
   render() {
     const {comment, link, data, root} = this.props;
-    // console.log(comment.action_summaries, getTotalReactionsCount(comment.action_summaries));
 
     return (
       <div className={styles.myComment}>
@@ -27,18 +26,17 @@ class Comment extends React.Component {
           />
           <div className={cn(styles.commentSummary, 'comment_summary')}>
             <span className={cn(styles.commentSummaryReactions, 'comment_summary_reactions')}>
-              <Icon name="thumb_up" /> {getTotalReactionsCount(comment.action_summaries)} reactions
+              <Icon name="thumb_up" /> {getTotalReactionsCount(comment.action_summaries)} {t('common.reactions')}
             </span>
-            
             <span className={cn('comment_summary_replies')}>
-              <Icon name="reply" /> {comment.replyCount} replies
+              <Icon name="reply" /> {comment.replyCount} {t('common.replies')}
             </span>
           </div>
           <div className="my-comment-asset">
             <a className={cn(styles.assetURL, 'my-comment-anchor')}
               href="#"
               onClick={link(`${comment.asset.url}`)}>
-              Story: {comment.asset.title ? comment.asset.title : comment.asset.url}
+              {t('common.story')}: {comment.asset.title ? comment.asset.title : comment.asset.url}
             </a>
           </div>
         </div>
diff --git a/locales/en.yml b/locales/en.yml
index 2ec0c816c..da7bd54d1 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -41,6 +41,9 @@ en:
   common:
     copy: 'Copy'
     error: 'An error has occurred.'
+    replies: 'replies'
+    reactions: 'reactions'
+    story: 'Story'
   community:
     account_creation_date: "Account Creation Date"
     active: Active
diff --git a/locales/es.yml b/locales/es.yml
index 877a42841..8c3683021 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -41,6 +41,9 @@ es:
   common:
     copy: 'Copiar'
     error: 'Ha ocurrido un error.'
+    replies: 'respuestas'
+    reactions: 'reacciones'
+    story: 'Artículo'
   community:
     account_creation_date: "Fecha de creación de la cuenta"
     active: Activa

From e77bdf0b900853d329fa9e31a7a4073413ef1b45 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 28 Aug 2017 16:31:46 -0300
Subject: [PATCH 03/11] linting

---
 client/coral-settings/containers/ProfileContainer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-settings/containers/ProfileContainer.js b/client/coral-settings/containers/ProfileContainer.js
index 907839a92..571952639 100644
--- a/client/coral-settings/containers/ProfileContainer.js
+++ b/client/coral-settings/containers/ProfileContainer.js
@@ -109,7 +109,7 @@ const CommentFragment = gql`
       id
       body
       replyCount
-	    action_summaries {
+      action_summaries {
         count
         __typename
       }

From 7823b65c7d0c5ba61f20a82252c0ac051a44f88a Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 28 Aug 2017 16:48:52 -0600
Subject: [PATCH 04/11] Changed email verification regex, fixes #891

---
 client/coral-framework/helpers/validate.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-framework/helpers/validate.js b/client/coral-framework/helpers/validate.js
index dd36ae07f..ef64a2c84 100644
--- a/client/coral-framework/helpers/validate.js
+++ b/client/coral-framework/helpers/validate.js
@@ -1,5 +1,5 @@
 export default {
-  email: (email) => (/^([A-Za-z0-9_\-\.\+])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(email)),
+  email: (email) => (/^.+@.+\..+$/.test(email)),
   password: (pass) => (/^(?=.{8,}).*$/.test(pass)),
   confirmPassword: () => true,
   username: (username) => (/^[a-zA-Z0-9_]+$/.test(username)),

From da92a8e7c2cfa87c7cf83edbe91bd3f29e7dfe6d Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 29 Aug 2017 08:47:23 -0300
Subject: [PATCH 05/11] Plural and singular translations

---
 client/talk-plugin-history/Comment.js | 9 +++++++--
 locales/en.yml                        | 2 ++
 locales/es.yml                        | 2 ++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/client/talk-plugin-history/Comment.js b/client/talk-plugin-history/Comment.js
index c9851b43c..2ddd45816 100644
--- a/client/talk-plugin-history/Comment.js
+++ b/client/talk-plugin-history/Comment.js
@@ -13,6 +13,7 @@ class Comment extends React.Component {
 
   render() {
     const {comment, link, data, root} = this.props;
+    const reactionCount = getTotalReactionsCount(comment.action_summaries);
 
     return (
       <div className={styles.myComment}>
@@ -26,10 +27,14 @@ class Comment extends React.Component {
           />
           <div className={cn(styles.commentSummary, 'comment_summary')}>
             <span className={cn(styles.commentSummaryReactions, 'comment_summary_reactions')}>
-              <Icon name="thumb_up" /> {getTotalReactionsCount(comment.action_summaries)} {t('common.reactions')}
+              <Icon name="thumb_up" />
+              {reactionCount}
+              {reactionCount === 1 ? t('common.reaction') : t('common.reactions')}
             </span>
             <span className={cn('comment_summary_replies')}>
-              <Icon name="reply" /> {comment.replyCount} {t('common.replies')}
+              <Icon name="reply" />
+              {comment.replyCount}
+              {comment.replyCount === 1 ? t('common.reply') : t('common.replies')}
             </span>
           </div>
           <div className="my-comment-asset">
diff --git a/locales/en.yml b/locales/en.yml
index da7bd54d1..791bc1121 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -41,7 +41,9 @@ en:
   common:
     copy: 'Copy'
     error: 'An error has occurred.'
+    reply: 'reply'
     replies: 'replies'
+    reaction: 'reaction'
     reactions: 'reactions'
     story: 'Story'
   community:
diff --git a/locales/es.yml b/locales/es.yml
index 8c3683021..99f55d32b 100644
--- a/locales/es.yml
+++ b/locales/es.yml
@@ -41,7 +41,9 @@ es:
   common:
     copy: 'Copiar'
     error: 'Ha ocurrido un error.'
+    reply: 'respuesta'
     replies: 'respuestas'
+    reaction: 'reacción'
     reactions: 'reacciones'
     story: 'Artículo'
   community:

From 1053c55d19fcfcdfab8083da7e335e15bcb547ca Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 29 Aug 2017 09:01:40 -0300
Subject: [PATCH 06/11] Adding zero state style for 0 counts

---
 client/talk-plugin-history/Comment.css | 11 ++++++++++-
 client/talk-plugin-history/Comment.js  | 14 +++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/client/talk-plugin-history/Comment.css b/client/talk-plugin-history/Comment.css
index ba63aaeb1..1200709a3 100644
--- a/client/talk-plugin-history/Comment.css
+++ b/client/talk-plugin-history/Comment.css
@@ -27,9 +27,18 @@
 }
 
 .commentSummaryReactions {
-  margin-right: 5px;
+  margin-right: 10px;
 }
 
+.reactionCount, .replyCount {
+  margin: 0 4px;
+}
+
+.countZero {
+  color: #9E9E9E;
+}
+
+
 .sidebar {
   ul {
     margin-top: 0;
diff --git a/client/talk-plugin-history/Comment.js b/client/talk-plugin-history/Comment.js
index 2ddd45816..b813e514b 100644
--- a/client/talk-plugin-history/Comment.js
+++ b/client/talk-plugin-history/Comment.js
@@ -25,15 +25,19 @@ class Comment extends React.Component {
             data={data}
             queryData={{root, comment, asset: comment.asset}}
           />
-          <div className={cn(styles.commentSummary, 'comment_summary')}>
-            <span className={cn(styles.commentSummaryReactions, 'comment_summary_reactions')}>
+          <div className={cn(styles.commentSummary, 'comment-summary')}>
+            <span className={cn(styles.commentSummaryReactions, 'comment-summary-reactions', {[styles.countZero]: reactionCount === 0})}>
               <Icon name="thumb_up" />
-              {reactionCount}
+              <span className={cn(styles.reactionCount, 'comment-summary-reaction-count')}>
+                {reactionCount}
+              </span>
               {reactionCount === 1 ? t('common.reaction') : t('common.reactions')}
             </span>
-            <span className={cn('comment_summary_replies')}>
+            <span className={cn('comment-summary-replies', {[styles.countZero]: comment.replyCount === 0})}>
               <Icon name="reply" />
-              {comment.replyCount}
+              <span className={cn(styles.replyCount, 'comment-summary-reply-count')}>
+                {comment.replyCount} 
+              </span>
               {comment.replyCount === 1 ? t('common.reply') : t('common.replies')}
             </span>
           </div>

From 75125993b9604b3cdf7b8da57d8cf7d7d6c58174 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 29 Aug 2017 10:21:31 -0600
Subject: [PATCH 07/11] Added patch for missing action summary type

---
 client/coral-framework/utils/index.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/coral-framework/utils/index.js b/client/coral-framework/utils/index.js
index df264d360..26f6b627e 100644
--- a/client/coral-framework/utils/index.js
+++ b/client/coral-framework/utils/index.js
@@ -185,10 +185,15 @@ export function getShallowChanges(a, b) {
     .filter((key) => a[key] !== b[key]);
 }
 
+// TODO: replace with something less fragile.
+// NOT_REACTION_TYPES are the action summaries that are not reactions.
+const NOT_REACTION_TYPES = [
+  'FlagActionSummary',
+  'DontAgreeActionSummary',
+];
+
 export function getTotalReactionsCount(actionSummaries) {
   return actionSummaries
-    .filter((s) => s.__typename !== 'FlagActionSummary')
-    .reduce((total, summary) => {
-      return total + summary.count;
-    }, 0);
+    .filter(({__typename}) => !NOT_REACTION_TYPES.includes(__typename))
+    .reduce((total, {count}) => total + count, 0);
 }

From c786805505172058e24c5eb4c1c751147d22c607 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Tue, 29 Aug 2017 10:28:30 -0600
Subject: [PATCH 08/11] small bug fix

---
 test/server/graph/queries/asset.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/server/graph/queries/asset.js b/test/server/graph/queries/asset.js
index 4d96be74a..ba605dfd7 100644
--- a/test/server/graph/queries/asset.js
+++ b/test/server/graph/queries/asset.js
@@ -34,7 +34,7 @@ describe('graph.queries.asset', () => {
         username: 'usernameC'
       }
     ]);
-    comments = await CommentsService.publicCreate([0, 1, 0, 1].map((idx) => ({
+    comments = await CommentsService.publicCreate([0, 0, 1, 1].map((idx) => ({
       author_id: users[idx].id,
       asset_id: assets[idx].id,
       body: `hello there! ${String(Math.random()).slice(2)}`,
@@ -74,12 +74,12 @@ describe('graph.queries.asset', () => {
 
     expect(asset.nodes).to.have.length(2);
     expect(asset.hasNextPage).to.be.false;
-    expect(asset.nodes[0]).to.have.property('id', comments[2].id);
+    expect(asset.nodes[0]).to.have.property('id', comments[1].id);
     expect(asset.nodes[1]).to.have.property('id', comments[0].id);
     expect(otherAsset.nodes).to.have.length(2);
     expect(otherAsset.hasNextPage).to.be.false;
     expect(otherAsset.nodes[0]).to.have.property('id', comments[3].id);
-    expect(otherAsset.nodes[1]).to.have.property('id', comments[1].id);
+    expect(otherAsset.nodes[1]).to.have.property('id', comments[2].id);
 
     for (let node of asset.nodes) {
       for (let otherNode of otherAsset.nodes) {

From 46c031b35ddc604290be0719d2ee97d32cbd5776 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 29 Aug 2017 23:53:00 +0700
Subject: [PATCH 09/11] Fix endless interval

---
 client/coral-framework/components/Popup.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/client/coral-framework/components/Popup.js b/client/coral-framework/components/Popup.js
index 1fe3408ea..33041442f 100644
--- a/client/coral-framework/components/Popup.js
+++ b/client/coral-framework/components/Popup.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 export default class Popup extends Component {
   ref = null;
   detectCloseInterval = null;
+  resetCallbackInterval = null;
 
   constructor(props) {
     super(props);
@@ -41,16 +42,26 @@ export default class Popup extends Component {
     this.ref.onunload = () => {
       this.onUnload();
 
-      const interval = setInterval(() => {
+      if (this.resetCallbackInterval) {
+        clearInterval(this.resetCallbackInterval);
+      }
+
+      this.resetCallbackInterval = setInterval(() => {
         if (this.ref && this.ref.onload === null) {
+          clearInterval(this.resetCallbackInterval);
+          this.resetCallbackInterval = null;
           this.setCallbacks();
-          clearInterval(interval);
         }
       }, 50);
 
+      if (this.detectCloseInterval) {
+        clearInterval(this.detectCloseInterval);
+      }
+
       this.detectCloseInterval = setInterval(() => {
         if (!this.ref || this.ref.closed) {
           clearInterval(this.detectCloseInterval);
+          this.detectCloseInterval = null;
           this.onClose();
         }
       }, 50);

From 21e4cf5865249330faeea17b08dfcf637940f373 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 30 Aug 2017 00:27:14 +0700
Subject: [PATCH 10/11] Live update replies on all sort and always refetch

---
 .../src/containers/Stream.js                  | 29 ++++---------------
 1 file changed, 5 insertions(+), 24 deletions(-)

diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js
index 271421dea..194bfc5d9 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/containers/Stream.js
@@ -84,6 +84,10 @@ class StreamContainer extends React.Component {
           return prev;
         }
 
+        // Newest top-level comments are only added when sorting by 'newest first'.
+        if (!commentAdded.parent && !this.isSortedByNewestFirst()) {
+          return prev;
+        }
         return insertCommentIntoEmbedQuery(prev, commentAdded);
       },
     });
@@ -163,32 +167,9 @@ class StreamContainer extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const prevSortedNewest = this.isSortedByNewestFirst(this.props);
-    const nextSortedNewest = this.isSortedByNewestFirst(nextProps);
-
-    // When switching to 'Newest first' we refetch and subscribe so that
-    // we always have the newest comments.
-    if (!prevSortedNewest && nextSortedNewest) {
+    if (this.props.sortOrder !== nextProps.sortOrder || this.props.sortBy !== nextProps.sortBy) {
       nextProps.data.refetch();
-      this.subscribeToCommentsAdded();
     }
-
-    // When switching away from 'Newest first' unsubscribe from newest comments.
-    if (prevSortedNewest && !nextSortedNewest) {
-      this.unsubscribeCommentsAdded();
-    }
-  }
-
-  shouldComponentUpdate(nextProps) {
-    const prevSortedNewest = this.isSortedByNewestFirst(this.props);
-    const nextSortedNewest = this.isSortedByNewestFirst(nextProps);
-    if (!prevSortedNewest && nextSortedNewest) {
-
-      // When switching to 'Newest first' we refetch => skip
-      // rendering this frame and wait for refetch to kick in.
-      return false;
-    }
-    return true;
   }
 
   userIsDegraged({auth: {user}} = this.props) {

From 90a0446afa3360689d9945da22c64c0df8097e17 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 30 Aug 2017 00:35:55 +0700
Subject: [PATCH 11/11] Move Spinner down to replacing TabContent

---
 .../coral-embed-stream/src/components/Stream.js | 17 +++++++----------
 .../src/components/StreamTabPanel.css           |  3 +++
 .../src/components/StreamTabPanel.js            | 14 +++++++++-----
 .../src/containers/StreamTabPanel.js            |  2 ++
 4 files changed, 21 insertions(+), 15 deletions(-)
 create mode 100644 client/coral-embed-stream/src/components/StreamTabPanel.css

diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 6959ff662..8ba34e3b4 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -13,7 +13,7 @@ import t, {timeago} from 'coral-framework/services/i18n';
 import CommentBox from 'talk-plugin-commentbox/CommentBox';
 import QuestionBox from 'talk-plugin-questionbox/QuestionBox';
 import {isCommentActive} from 'coral-framework/utils';
-import {Spinner, Button, Tab, TabCount, TabPane} from 'coral-ui';
+import {Button, Tab, TabCount, TabPane} from 'coral-ui';
 import cn from 'classnames';
 
 import {getTopLevelParent, attachCommentToParent} from '../graphql/utils';
@@ -23,8 +23,6 @@ import StreamTabPanel from '../containers/StreamTabPanel';
 
 import styles from './Stream.css';
 
-const SpinnerWhenLoading = ({loading, children}) => loading ? <Spinner /> : <div>{children}</div>;
-
 class Stream extends React.Component {
 
   constructor(props) {
@@ -144,6 +142,7 @@ class Stream extends React.Component {
       emit,
       sortOrder,
       sortBy,
+      loading,
     } = this.props;
 
     const slotProps = {data};
@@ -171,6 +170,7 @@ class Stream extends React.Component {
           tabPaneSlot={'streamTabPanes'}
           slotProps={slotProps}
           queryData={slotQueryData}
+          loading={loading}
           appendTabs={
             <Tab tabId={'all'} key='all'>
               All Comments <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
@@ -223,7 +223,6 @@ class Stream extends React.Component {
       viewAllComments,
       auth: {loggedIn, user},
       editName,
-      loading,
     } = this.props;
     const {keepCommentBox} = this.state;
     const open = !asset.isClosed;
@@ -310,12 +309,10 @@ class Stream extends React.Component {
           />
         )}
 
-        <SpinnerWhenLoading loading={loading}>
-          {highlightedComment
-            ? this.renderHighlightedComment()
-            : this.renderTabPanel()
-          }
-        </SpinnerWhenLoading>
+        {highlightedComment
+          ? this.renderHighlightedComment()
+          : this.renderTabPanel()
+        }
       </div>
     );
   }
diff --git a/client/coral-embed-stream/src/components/StreamTabPanel.css b/client/coral-embed-stream/src/components/StreamTabPanel.css
new file mode 100644
index 000000000..9398d373c
--- /dev/null
+++ b/client/coral-embed-stream/src/components/StreamTabPanel.css
@@ -0,0 +1,3 @@
+.spinnerContainer {
+  margin-top: 16px;
+}
diff --git a/client/coral-embed-stream/src/components/StreamTabPanel.js b/client/coral-embed-stream/src/components/StreamTabPanel.js
index 0f2092092..a511ac555 100644
--- a/client/coral-embed-stream/src/components/StreamTabPanel.js
+++ b/client/coral-embed-stream/src/components/StreamTabPanel.js
@@ -1,19 +1,23 @@
 import React from 'react';
-import {TabBar, TabContent} from 'coral-ui';
+import {Spinner, TabBar, TabContent} from 'coral-ui';
 import PropTypes from 'prop-types';
+import styles from './StreamTabPanel.css';
 
 class StreamTabPanel extends React.Component {
 
   render() {
-    const {activeTab, setActiveTab, tabs, tabPanes, sub} = this.props;
+    const {activeTab, setActiveTab, tabs, tabPanes, sub, loading} = this.props;
     return (
       <div>
         <TabBar activeTab={activeTab} onTabClick={setActiveTab} sub={sub}>
           {tabs}
         </TabBar>
-        <TabContent activeTab={activeTab} sub={sub}>
-          {tabPanes}
-        </TabContent>
+        {loading
+          ? <div className={styles.spinnerContainer}><Spinner /></div>
+          : <TabContent activeTab={activeTab} sub={sub}>
+              {tabPanes}
+            </TabContent>
+        }
       </div>
     );
   }
diff --git a/client/coral-embed-stream/src/containers/StreamTabPanel.js b/client/coral-embed-stream/src/containers/StreamTabPanel.js
index 152f34e39..fde6e3be4 100644
--- a/client/coral-embed-stream/src/containers/StreamTabPanel.js
+++ b/client/coral-embed-stream/src/containers/StreamTabPanel.js
@@ -86,6 +86,7 @@ class StreamTabPanelContainer extends React.Component {
         setActiveTab={this.props.setActiveTab}
         tabs={this.getPluginTabElements().concat(this.props.appendTabs)}
         tabPanes={this.getPluginTabPaneElements().concat(this.props.appendTabPanes)}
+        loading={this.props.loading}
         sub={this.props.sub}
       />
     );
@@ -110,6 +111,7 @@ StreamTabPanelContainer.propTypes = {
   queryData: PropTypes.object,
   className: PropTypes.string,
   sub: PropTypes.bool,
+  loading: PropTypes.bool,
 };
 
 const mapStateToProps = (state) => ({