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 ? :
{children}
;
-
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={
All Comments {totalCommentCount}
@@ -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 {
/>
)}
-
- {highlightedComment
- ? this.renderHighlightedComment()
- : this.renderTabPanel()
- }
-
+ {highlightedComment
+ ? this.renderHighlightedComment()
+ : this.renderTabPanel()
+ }
);
}
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 (
{tabs}
-
- {tabPanes}
-
+ {loading
+ ?
+ :
+ {tabPanes}
+
+ }
);
}
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) => ({