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) => ({