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
index bc84dca614..8e3e360812 100644
--- 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
index 89d7ee369f..96fe6fce7b 100644
--- 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;
       }));
   });
 }