diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index d3d60c2af5..32fb2f6f77 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -27,6 +27,14 @@ module.exports = React.createClass({ // true to give the component a 'display: none' style. hidden: React.PropTypes.bool, + // true to show a spinner at the top of the timeline to indicate + // back-pagination in progress + backPaginating: React.PropTypes.bool, + + // true to show a spinner at the end of the timeline to indicate + // forward-pagination in progress + forwardPaginating: React.PropTypes.bool, + // the list of MatrixEvents to display events: React.PropTypes.array.isRequired, @@ -328,13 +336,24 @@ module.exports = React.createClass({ render: function() { var ScrollPanel = sdk.getComponent("structures.ScrollPanel"); + var Spinner = sdk.getComponent("elements.Spinner"); + var topSpinner, bottomSpinner; + if (this.props.backPaginating) { + topSpinner =
  • ; + } + if (this.props.forwardPaginating) { + bottomSpinner =
  • ; + } + return ( + {topSpinner} {this._getEventTiles()} + {bottomSpinner} ); }, diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js index c8e5482d15..8b0fb6b2c7 100644 --- a/src/components/structures/TimelinePanel.js +++ b/src/components/structures/TimelinePanel.js @@ -102,6 +102,9 @@ var TimelinePanel = React.createClass({ readMarkerVisible: true, readMarkerEventId: initialReadMarker, + + backPaginating: false, + forwardPaginating: false, }; }, @@ -154,8 +157,12 @@ var TimelinePanel = React.createClass({ return q(false); } debuglog("TimelinePanel: Initiating paginate; backwards:"+backwards); + var statekey = backwards ? 'backPaginating' : 'forwardPaginating'; + this.setState({[statekey]: true}); + return this._timelineWindow.paginate(dir, PAGINATE_SIZE).then((r) => { debuglog("TimelinePanel: paginate complete backwards:"+backwards+"; success:"+r); + this.setState({[statekey]: false}); this._onTimelineUpdated(r); return r; }); @@ -615,6 +622,8 @@ var TimelinePanel = React.createClass({ return (