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 (