Access History and Active Sessions are now lazy-loaded upon opening instead of loaded at start; added loading screens to Access History and Active Sessions

web/react/components/access_history_modal.jsx

@@ -3,7 +3,8 @@
 
 var UserStore = require('../stores/user_store.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
-var Utils = require('../utils/utils.jsx');
+var LoadingScreen = require('./loading_screen.jsx');
+var utils = require('../utils/utils.jsx');
 
 function getStateFromStoresForAudits() {
     return {
@@ -14,7 +15,9 @@ function getStateFromStoresForAudits() {
 module.exports = React.createClass({
     componentDidMount: function() {
         UserStore.addAuditsChangeListener(this._onChange);
-        AsyncClient.getAudits();
+        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) {
+            AsyncClient.getAudits();
+        });
 
         var self = this;
         $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
@@ -25,7 +28,10 @@ module.exports = React.createClass({
         UserStore.removeAuditsChangeListener(this._onChange);
     },
     _onChange: function() {
-        this.setState(getStateFromStoresForAudits());
+        var newState = getStateFromStoresForAudits();
+        if (!utils.areStatesEqual(newState.audits, this.state.audits)) {
+            this.setState(newState);
+        }
     },
     handleMoreInfo: function(index) {
         var newMoreInfo = this.state.moreInfo;
@@ -87,9 +93,13 @@ module.exports = React.createClass({
                                 <h4 className="modal-title" id="myModalLabel">Access History</h4>
                             </div>
                             <div ref="modalBody" className="modal-body">
+                                { !this.state.audits.loading ?
                                 <form role="form">
                                 { accessList }
                                 </form>
+                                :
+                                <LoadingScreen />
+                                }
                             </div>
                         </div>
                     </div>

web/react/components/activity_log_modal.jsx

@@ -4,6 +4,8 @@
 var UserStore = require('../stores/user_store.jsx');
 var Client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
+var LoadingScreen = require('./loading_screen.jsx');
+var utils = require('../utils/utils.jsx');
 
 function getStateFromStoresForSessions() {
     return {
@@ -29,7 +31,9 @@ module.exports = React.createClass({
     },
     componentDidMount: function() {
         UserStore.addSessionsChangeListener(this._onChange);
-        AsyncClient.getSessions();
+        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) {
+            AsyncClient.getSessions();
+        });
 
         var self = this;
         $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
@@ -40,7 +44,10 @@ module.exports = React.createClass({
         UserStore.removeSessionsChangeListener(this._onChange);
     },
     _onChange: function() {
-        this.setState(getStateFromStoresForSessions());
+        var newState = getStateFromStoresForSessions();
+        if (!utils.areStatesEqual(newState.sessions, this.state.sessions)) {
+            this.setState(newState);
+        }
     },
     handleMoreInfo: function(index) {
         var newMoreInfo = this.state.moreInfo;
@@ -106,10 +113,16 @@ module.exports = React.createClass({
                             </div>
                             <p className="session-help-text">Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the "Logout" button below to end a session.</p>
                             <div ref="modalBody" className="modal-body">
+                                { !this.state.sessions.loading ?
+                                <div>
                                 <form role="form">
                                 { activityList }
                                 </form>
                                 { server_error }
+                                </div>
+                                :
+                                <LoadingScreen />
+                                }
                             </div>
                         </div>
                     </div>

web/react/stores/user_store.jsx

@@ -164,13 +164,13 @@ var UserStore = assign({}, EventEmitter.prototype, {
     BrowserStore.setItem("sessions", sessions);
   },
   getSessions: function() {
-    return BrowserStore.getItem("sessions", []);
+    return BrowserStore.getItem("sessions", {loading: true});
   },
   setAudits: function(audits) {
     BrowserStore.setItem("audits", audits);
   },
   getAudits: function() {
-    return BrowserStore.getItem("audits", []);
+    return BrowserStore.getItem("audits", {loading: true});
   },
   setTeams: function(teams) {
     BrowserStore.setItem("teams", teams);