fix: add loader to user profile page

Squashed commit of the following: commit f643afe Author: Carlos A. Munoz <[email protected]> Date: Thu Sep 24 09:08:09 2015 +1000 fix: Loader not updating properly after data load commit 2c1290d Author: Carlos A. Munoz <[email protected]> Date: Mon Sep 21 14:49:31 2015 +1000 fix: add loader to user profile page Loader is added when the page is loading data so as to not show a blank page.
carlosmunoz · Sep 24, 2015 · def7eab · def7eab
1 parent 4ba64f0
commit def7eab
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 9 deletions.
diff --git a/frontend/src/main/web/user-profile-page/lib/components/RecentContributions.jsx b/frontend/src/main/web/user-profile-page/lib/components/RecentContributions.jsx
@@ -31,6 +31,27 @@ var RecentContributions = React.createClass(
     render: function() {
       var dateRange = this.state.dateRange;
 
+      var loader = (
+        <a href="#" className="loader--large is-active">
+          <span className="loader__spinner">
+            <span></span>
+            <span></span>
+            <span></span>
+          </span>
+        </a>);
+      var chart = this.state.loading ? loader : (
+        <ContributionChart wordCountForEachDay={this.state.matrixForAllDays}
+          dateRangeOption={this.state.dateRangeOption} />);
+      var matrix = this.state.loading ? undefined : (
+        <FilterableMatrixTable
+          wordCountForSelectedDay={this.state.wordCountsForSelectedDayFilteredByContentState}
+          wordCountForEachDay={this.state.wordCountsForEachDayFilteredByContentState}
+          fromDate={dateRange['fromDate']} toDate={dateRange['toDate']}
+          dateRangeOption={this.state.dateRangeOption}
+          selectedContentState={this.state.contentStateOption}
+          selectedDay={this.state.selectedDay}
+          />);
+
       return (
         <div className="l__wrapper">
           <div className="l--push-bottom-1">
@@ -40,16 +61,9 @@ var RecentContributions = React.createClass(
             <h2 className='delta txt--uppercase'>Recent Contributions</h2>
           </div>
           <div className="l--push-bottom-1">
-            <ContributionChart wordCountForEachDay={this.state.matrixForAllDays} dateRangeOption={this.state.dateRangeOption} />
+            {chart}
           </div>
-          <FilterableMatrixTable
-            wordCountForSelectedDay={this.state.wordCountsForSelectedDayFilteredByContentState}
-            wordCountForEachDay={this.state.wordCountsForEachDayFilteredByContentState}
-            fromDate={dateRange['fromDate']} toDate={dateRange['toDate']}
-            dateRangeOption={this.state.dateRangeOption}
-            selectedContentState={this.state.contentStateOption}
-            selectedDay={this.state.selectedDay}
-          />
+          {matrix}
         </div>
       )
     }

diff --git a/frontend/src/main/web/user-profile-page/lib/stores/UserMatrixStore.js b/frontend/src/main/web/user-profile-page/lib/stores/UserMatrixStore.js
@@ -19,12 +19,16 @@ var _state = {
   dateRangeOption: DateRanges[0],
   selectedDay: null,
   contentStateOption: ContentStates[0],
+  loading: false,
   dateRange: function(option) {
     return utilsDate.getDateRangeFromOption(option);
   }
 };
 
 function loadFromServer() {
+  _state.loading = true;
+  UserMatrixStore.emitChange();
+
   var dateRangeOption = _state['dateRangeOption'],
     dateRange = utilsDate.getDateRangeFromOption(dateRangeOption),
     url = Configs.baseUrl + dateRange.fromDate + '..' + dateRange.toDate;
@@ -46,6 +50,7 @@ function loadFromServer() {
         } else {
           resolve(res['body']);
         }
+        _state.loading = false;
       }));
   });
 }