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; })); }); }