From 4910a225d13420ee1684c52b60dec62fe2c3bf72 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 26 Apr 2017 17:26:53 +0100
Subject: [PATCH] Fix spinner that shows until the first sync

Listen for the sync event and update when it changes
---
 src/components/structures/TimelinePanel.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index dde86e1ce9..f07bad0052 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -167,6 +168,9 @@ var TimelinePanel = React.createClass({
 
             backPaginating: false,
             forwardPaginating: false,
+
+            // cache of matrixClient.getSyncState() (but from the 'sync' event)
+            clientSyncState: null,
         };
     },
 
@@ -183,6 +187,7 @@ var TimelinePanel = React.createClass({
         MatrixClientPeg.get().on("Room.receipt", this.onRoomReceipt);
         MatrixClientPeg.get().on("Room.localEchoUpdated", this.onLocalEchoUpdated);
         MatrixClientPeg.get().on("Room.accountData", this.onAccountData);
+        MatrixClientPeg.get().on("sync", this.onSync);
 
         this._initTimeline(this.props);
     },
@@ -251,6 +256,7 @@ var TimelinePanel = React.createClass({
             client.removeListener("Room.receipt", this.onRoomReceipt);
             client.removeListener("Room.localEchoUpdated", this.onLocalEchoUpdated);
             client.removeListener("Room.accountData", this.onAccountData);
+            client.removeListener("sync", this.onSync);
         }
     },
 
@@ -487,6 +493,10 @@ var TimelinePanel = React.createClass({
         }, this.props.onReadMarkerUpdated);
     },
 
+    onSync: function(state, prevState, data) {
+        this.setState({clientSyncState: state});
+    },
+
     sendReadReceipt: function() {
         if (!this.refs.messagePanel) return;
         if (!this.props.manageReadReceipts) return;
@@ -1062,7 +1072,7 @@ var TimelinePanel = React.createClass({
         // If the state is PREPARED, we're still waiting for the js-sdk to sync with
         // the HS and fetch the latest events, so we are effectively forward paginating.
         const forwardPaginating = (
-            this.state.forwardPaginating || MatrixClientPeg.get().getSyncState() == 'PREPARED'
+            this.state.forwardPaginating || this.state.clientSyncState == 'PREPARED'
         );
 
         return (