Stats: Create Placeholder Component

client/my-sites/stats/stats-chart-tabs/index.jsx

@@ -13,6 +13,7 @@ var ElementChart = require( 'components/chart' ),
 	StatTabs = require( '../stats-tabs' ),
 	analytics = require( 'analytics' ),
 	observe = require( 'lib/mixins/data-observe' ),
+	StatsModulePlaceholder = require( '../stats-module/placeholder' ),
 	Card = require( 'components/card' );
 
 module.exports = React.createClass( {
@@ -238,7 +239,7 @@ module.exports = React.createClass( {
 		return (
 			<Card className={ classNames.apply( null, classes ) }>
 				<Legend tabs={ this.props.charts } activeTab={ activeTab } availableCharts={ availableCharts } activeCharts={ this.state.activeLegendCharts } clickHandler={ this.onLegendClick } />
-				<div className="module-placeholder is-void is-chart"></div>
+				<StatsModulePlaceholder className="is-chart" isLoading={ activeTabLoading } />
 				<ElementChart loading={ activeTabLoading } data={ data } barClick={ this.props.barClick } />
 				<StatTabs dataList={ visitsList } tabs={ this.props.charts } switchTab={ this.props.switchTab } selectedTab={ this.props.chartTab } activeIndex={ this.props.queryDate } activeKey="period" />
 			</Card>

client/my-sites/stats/stats-comments/index.jsx

@@ -14,6 +14,7 @@ import Gridicon from 'components/gridicon';
 import CommentTab from './comment-tab';
 import StatsErrorPanel from '../stats-error';
 import StatsModuleHeader from '../stats-module/header';
+import StatsModulePlaceholder from '../stats-module/placeholder';
 import StatsModuleContent from '../stats-module/content-text';
 import StatsModuleSelectDropdown from '../stats-module/select-dropdown';
 
@@ -176,7 +177,7 @@ export default React.createClass( {
 						isActive={ 'top-content' === activeFilter } />
 
 					{ this.renderSummary }
-					<div className="module-placeholder is-void"></div>
+					<StatsModulePlaceholder isLoading={ ! data } />
 				</div>
 			</Card>
 		);

client/my-sites/stats/stats-countries/index.jsx

@@ -16,6 +16,7 @@ var toggle = require( '../mixin-toggle' ),
 	DatePicker = require( '../stats-date-picker' ),
 	ErrorPanel = require( '../stats-error' ),
 	Card = require( 'components/card' ),
+	StatsModulePlaceholder = require( '../stats-module/placeholder' ),
 	Gridicon = require( 'components/gridicon' );
 
 module.exports = React.createClass( {
@@ -49,6 +50,7 @@ module.exports = React.createClass( {
 			hasError = this.props.dataList.isError(),
 			noData = this.props.dataList.isEmpty(),
 			infoIcon = this.state.showInfo ? 'info' : 'info-outline',
+			isLoading = this.props.dataList.isLoading(),
 			moduleHeaderTitle,
 			summaryPageLink,
 			viewSummary,
@@ -62,7 +64,7 @@ module.exports = React.createClass( {
 			{
 				'is-expanded': this.state.showModule,
 				summary: this.props.summary,
-				'is-loading': this.props.dataList.isLoading(),
+				'is-loading': isLoading,
 				'is-showing-info': this.state.showInfo,
 				'has-no-data': noData,
 				'is-showing-error': hasError || noData
@@ -127,7 +129,7 @@ module.exports = React.createClass( {
 						{ ( noData && ! hasError ) ? <ErrorPanel className="is-empty-message" message={ this.translate( 'No countries recorded' ) } /> : null }
 
 						{ geochart }
-						<div className="module-placeholder module-placeholder-block"></div>
+						<StatsModulePlaceholder className="is-block" isLoading={ isLoading } />
 						<div className="stats-async-metabox-wrapper">
 							<ul className="module-content-list module-content-list-legend">
 								<li className="module-content-list-item">
@@ -139,7 +141,7 @@ module.exports = React.createClass( {
 									</span>
 								</li>
 							</ul>
-							<div className="module-placeholder is-void"></div>
+							<StatsModulePlaceholder isLoading={ isLoading } />
 							{ countries }
 						</div>
 						{ this.props.summary

client/my-sites/stats/stats-countries/style.scss

@@ -1,14 +1,5 @@
 // Countries
 .countryviews {
-
-	&.is-block {
-		display: none;
-	}
-
-	.stats-module.is-loading & .summary .module-placeholder.is-block {
-		display: block;
-	}
-
 	.module-content-list-item-label .icon img {
 		background-color: $gray-light;
 	}

client/my-sites/stats/stats-detail-months/index.jsx

@@ -11,6 +11,7 @@ import toggle from '../mixin-toggle';
 import observe from 'lib/mixins/data-observe';
 import Card from 'components/card';
 import Gridicon from 'components/gridicon';
+import StatsModulePlaceholder from '../stats-module/placeholder';
 
 export default React.createClass( {
 	displayName: 'StatsPostDetailMonths',
@@ -41,8 +42,9 @@ export default React.createClass( {
 		const { showInfo, noData } = this.state;
 		const data = postViewsList.response;
 		const infoIcon = showInfo ? 'info' : 'info-outline';
+		const isLoading = postViewsList.isLoading();
 		const classes = {
-			'is-loading': this.props.postViewsList.isLoading(),
+			'is-loading': isLoading,
 			'is-showing-info': showInfo,
 			'has-no-data': noData
 		};
@@ -146,7 +148,7 @@ export default React.createClass( {
 							)
 						}</p>
 					</div>
-					<div className="module-placeholder is-void"></div>
+					<StatsModulePlaceholder isLoading={ isLoading } />
 					<div className="module-content-table">
 						<div className="module-content-table-scroll">
 							<table cellPadding="0" cellSpacing="0">

client/my-sites/stats/stats-detail-weeks/index.jsx

@@ -11,6 +11,7 @@ import observe from 'lib/mixins/data-observe';
 import toggle from '../mixin-toggle';
 import Card from 'components/card';
 import Gridicon from 'components/gridicon';
+import StatsModulePlaceholder from '../stats-module/placeholder';
 
 export default React.createClass( {
 	displayName: 'StatsPostDetailWeeks',
@@ -41,13 +42,14 @@ export default React.createClass( {
 		const post = data.post;
 		const { showInfo, noData } = this.state;
 		const infoIcon = this.state.showInfo ? 'info' : 'info-outline';
+		const isLoading = this.props.postViewsList.isLoading();
 		let tableHeader,
 			tableRows,
 			tableBody,
 			highest;
 
 		const classes = {
-			'is-loading': this.props.postViewsList.isLoading(),
+			'is-loading': isLoading,
 			'is-showing-info': showInfo,
 			'has-no-data': noData
 		};
@@ -179,7 +181,7 @@ export default React.createClass( {
 							)
 						}</p>
 					</div>
-					<div className="module-placeholder is-void"></div>
+					<StatsModulePlaceholder isLoading={ isLoading } />
 					<div className="module-content-table">
 						<div className="module-content-table-scroll">
 							<table cellPadding="0" cellSpacing="0">

client/my-sites/stats/stats-followers-page/index.jsx

@@ -10,6 +10,7 @@ var React = require( 'react' ),
  */
 var StatsList = require( '../stats-list' ),
 	StatsModuleSelectDropdown = require( '../stats-module/select-dropdown' ),
+	StatsModulePlaceholder = require( '../stats-module/placeholder' ),
 	toggle = require( '../mixin-toggle' ),
 	skeleton = require( '../mixin-skeleton' ),
 	ErrorPanel = require( '../stats-error' ),
@@ -71,6 +72,7 @@ module.exports = React.createClass( {
 		var data = this.data(),
 			hasError = this.props.followersList.isError(),
 			noData = this.props.followersList.isEmpty( 'subscribers' ),
+			isLoading = this.props.followersList.isLoading(),
 			followers,
 			moduleHeaderTitle,
 			labelLegend,
@@ -91,7 +93,7 @@ module.exports = React.createClass( {
 			'summary',
 			'is-followers-page',
 			{
-				'is-loading': this.props.followersList.isLoading(),
+				'is-loading': isLoading,
 				'is-showing-info': this.state.showInfo,
 				'has-no-data': noData,
 				'is-showing-error': hasError || noData
@@ -218,7 +220,7 @@ module.exports = React.createClass( {
 							{ hasError ? <ErrorPanel className={ 'network-error' } /> : null }
 						</div>
 
-						<div className="module-placeholder is-void"></div>
+						<StatsModulePlaceholder isLoading={ isLoading } />
 
 						{ pagination }
 

client/my-sites/stats/stats-followers/index.jsx

@@ -10,6 +10,7 @@ var React = require( 'react' ),
  */
 var toggle = require( '../mixin-toggle' ),
 	StatsModuleSelectDropdown = require( '../stats-module/select-dropdown' ),
+	StatsModulePlaceholder = require( '../stats-module/placeholder' ),
 	StatsList = require( '../stats-list' ),
 	observe = require( 'lib/mixins/data-observe' ),
 	ErrorPanel = require( '../stats-error' ),
@@ -94,6 +95,7 @@ module.exports = React.createClass( {
 			noData = this.props.wpcomFollowersList.isEmpty( 'subscribers' ) && this.props.emailFollowersList.isEmpty( 'subscribers' ),
 			hasError = ( this.props.wpcomFollowersList.isError() || this.props.emailFollowersList.isError() ),
 			infoIcon = this.state.showInfo ? 'info' : 'info-outline',
+			isLoading = this.props.wpcomFollowersList.isLoading() || this.props.emailFollowersList.isLoading(),
 			wpcomFollowers,
 			emailFollowers,
 			wpcomTotalFollowers,
@@ -119,7 +121,7 @@ module.exports = React.createClass( {
 			activeFilterClass,
 			{
 				'is-expanded': this.state.showModule,
-				'is-loading': this.props.wpcomFollowersList.isLoading() || this.props.emailFollowersList.isLoading(),
+				'is-loading': isLoading,
 				'is-showing-info': this.state.showInfo,
 				'has-no-data': noData,
 				'is-showing-error': hasError || noData
@@ -235,7 +237,7 @@ module.exports = React.createClass( {
 							{ this.props.emailFollowersList.isError() ? <ErrorPanel className={ 'network-error' } /> : null }
 						</div>
 
-						<div className="module-placeholder is-void"></div>
+						<StatsModulePlaceholder isLoading={ isLoading } />
 					</div>
 					{ viewSummary }
 				</div>

client/my-sites/stats/stats-module.jsx

@@ -3,8 +3,7 @@
  */
 var React = require( 'react' ),
 	page = require( 'page' ),
-	classNames = require( 'classnames' ),
-	debug = require( 'debug' )( 'calypso:stats:module' );
+	classNames = require( 'classnames' );
 
 /**
  * Internal dependencies
@@ -18,9 +17,9 @@ var toggle = require( './mixin-toggle' ),
 	DownloadCsv = require( './stats-download-csv' ),
 	DatePicker = require( './stats-date-picker' ),
 	Card = require( 'components/card' ),
+	StatsModulePlaceholder = require( './stats-module/placeholder' ),
 	Gridicon = require( 'components/gridicon' );
 
-
 module.exports = React.createClass( {
 	displayName: 'StatModule',
 
@@ -55,29 +54,28 @@ module.exports = React.createClass( {
 	},
 
 	render: function() {
-		debug( 'rendering stats module' );
-
 		var data = this.data(),
 			noData = this.props.dataList.isEmpty(),
 			hasError = this.props.dataList.isError(),
 			headerLink = this.props.moduleStrings.title,
 			infoIcon = this.state.showInfo ? 'info' : 'info-outline',
+			isLoading = this.props.dataList.isLoading(),
 			moduleHeaderTitle,
 			statsList,
 			viewSummary,
 			moduleToggle,
 			classes;
 
-			classes = classNames(
-				'stats-module',
-				{
-					'is-expanded': this.state.showModule,
-					'is-loading': this.props.dataList.isLoading(),
-					'is-showing-info': this.state.showInfo,
-					'has-no-data': noData,
-					'is-showing-error': hasError || noData
-				}
-			);
+		classes = classNames(
+			'stats-module',
+			{
+				'is-expanded': this.state.showModule,
+				'is-loading': isLoading,
+				'is-showing-info': this.state.showInfo,
+				'has-no-data': noData,
+				'is-showing-error': hasError || noData
+			}
+		);
 
 		statsList = <StatsList moduleName={ this.props.path } data={ data } followList={ this.props.followList } />;
 
@@ -95,7 +93,7 @@ module.exports = React.createClass( {
 
 			if ( this.props.dataList.response.viewAll ) {
 				viewSummary = (
-					<div key='view-all' className='module-expand'>
+					<div key="view-all" className="module-expand">
 						<a href="#" onClick={ this.viewAllHandler }>{ this.translate( 'View All', { context: 'Stats: Button label to expand a panel' } ) }<span className="right"></span></a>
 					</div>
 				);
@@ -116,7 +114,7 @@ module.exports = React.createClass( {
 					</div>
 					<div className="module-content">
 						<InfoPanel module={ this.props.path } />
-						{ ( noData && ! hasError ) ? <ErrorPanel className='is-empty-message' message={ this.props.moduleStrings.empty } /> : null }
+						{ ( noData && ! hasError ) ? <ErrorPanel className="is-empty-message" message={ this.props.moduleStrings.empty } /> : null }
 						{ hasError ? <ErrorPanel className={ 'network-error' } /> : null }
 						<div className="stats-async-metabox-wrapper">
 							<ul className="module-content-list module-content-list-legend">
@@ -129,11 +127,11 @@ module.exports = React.createClass( {
 									</span>
 								</li>
 							</ul>
-							<div className="module-placeholder is-void"></div>
+							<StatsModulePlaceholder isLoading={ isLoading } />
 							{ statsList }
 						</div>
-						{ this.props.summary ?
-							<DownloadCsv period={ this.props.period } path={ this.props.path } site={ this.props.site } dataList={ this.props.dataList } />
+						{ this.props.summary
+							? <DownloadCsv period={ this.props.period } path={ this.props.path } site={ this.props.site } dataList={ this.props.dataList } />
 						: null }
 					</div>
 					{ viewSummary }

client/my-sites/stats/stats-module/placeholder.jsx

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+
+export default React.createClass( {
+	displayName: 'StatsModulePlaceholder',
+
+	propTypes: {
+		className: PropTypes.string,
+		isLoading: PropTypes.bool
+	},
+
+	render() {
+		const { className, isLoading } = this.props;
+
+		if ( ! isLoading ) {
+			return null;
+		}
+
+		const classes = classNames( 'stats-module__placeholder', 'is-void', className );
+
+		return ( <div className={ classes } /> );
+	}
+} );