Display chart and summary numbers placeholder when loading search ter…

…ms (woocommerce#1694)
marcusquiroga · Feb 27, 2019 · c3c46ae · c3c46ae
1 parent 620e488
commit c3c46ae
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 42 deletions.
diff --git a/client/analytics/components/report-chart/index.js b/client/analytics/components/report-chart/index.js
@@ -135,29 +135,30 @@ export class ReportChart extends Component {
 	}
 
 	renderItemComparison() {
-		const { primaryData } = this.props;
+		const { isRequesting, primaryData } = this.props;
 
 		if ( primaryData.isError ) {
 			return <ReportError isError />;
 		}
 
-		const isRequesting = primaryData.isRequesting;
+		const isChartRequesting = isRequesting || primaryData.isRequesting;
 		const chartData = this.getItemChartData();
 
-		return this.renderChart( 'item-comparison', isRequesting, chartData );
+		return this.renderChart( 'item-comparison', isChartRequesting, chartData );
 	}
 
 	renderTimeComparison() {
-		const { primaryData, secondaryData } = this.props;
+		const { isRequesting, primaryData, secondaryData } = this.props;
 
 		if ( ! primaryData || primaryData.isError || secondaryData.isError ) {
 			return <ReportError isError />;
 		}
 
-		const isRequesting = primaryData.isRequesting || secondaryData.isRequesting;
+		const isChartRequesting =
+			isRequesting || primaryData.isRequesting || secondaryData.isRequesting;
 		const chartData = this.getTimeChartData();
 
-		return this.renderChart( 'time-comparison', isRequesting, chartData );
+		return this.renderChart( 'time-comparison', isChartRequesting, chartData );
 	}
 
 	render() {
@@ -174,6 +175,10 @@ ReportChart.propTypes = {
 	 * Filters available for that report.
 	 */
 	filters: PropTypes.array,
+	/**
+	 * Whether there is an API call running.
+	 */
+	isRequesting: PropTypes.bool,
 	/**
 	 * Label describing the legend items.
 	 */
@@ -206,6 +211,7 @@ ReportChart.propTypes = {
 };
 
 ReportChart.defaultProps = {
+	isRequesting: false,
 	primaryData: {
 		data: {
 			intervals: [],
@@ -224,9 +230,15 @@ ReportChart.defaultProps = {
 
 export default compose(
 	withSelect( ( select, props ) => {
-		const { query, endpoint, filters } = props;
+		const { endpoint, filters, isRequesting, query } = props;
 		const chartMode = props.mode || getChartMode( filters, query ) || 'time-comparison';
 
+		if ( isRequesting ) {
+			return {
+				mode: chartMode,
+			};
+		}
+
 		if ( query.search && ! ( query[ endpoint ] && query[ endpoint ].length ) ) {
 			return {
 				emptySearchResults: true,

diff --git a/client/analytics/components/report-summary/index.js b/client/analytics/components/report-summary/index.js
@@ -46,14 +46,14 @@ export class ReportSummary extends Component {
 	}
 
 	render() {
-		const { charts, query, selectedChart, summaryData } = this.props;
-		const { isError, isRequesting } = summaryData;
+		const { charts, isRequesting, query, selectedChart, summaryData } = this.props;
+		const { isError, isRequesting: isSummaryDataRequesting } = summaryData;
 
 		if ( isError ) {
 			return <ReportError isError />;
 		}
 
-		if ( isRequesting ) {
+		if ( isRequesting || isSummaryDataRequesting ) {
 			return <SummaryListPlaceholder numberOfItems={ charts.length } />;
 		}
 
@@ -112,6 +112,10 @@ ReportSummary.propTypes = {
 	 * The query string represented in object form.
 	 */
 	query: PropTypes.object.isRequired,
+	/**
+	 * Whether there is an API call running.
+	 */
+	isRequesting: PropTypes.bool,
 	/**
 	 * Properties of the selected chart.
 	 */
@@ -140,12 +144,18 @@ ReportSummary.defaultProps = {
 
 export default compose(
 	withSelect( ( select, props ) => {
-		const { query, endpoint } = props;
+		const { endpoint, isRequesting, query } = props;
+
+		if ( isRequesting ) {
+			return {};
+		}
+
 		if ( query.search && ! ( query[ endpoint ] && query[ endpoint ].length ) ) {
 			return {
 				emptySearchResults: true,
 			};
 		}
+
 		const summaryData = getSummaryNumbers( endpoint, query, select );
 
 		return {

diff --git a/client/analytics/report/categories/index.js b/client/analytics/report/categories/index.js
@@ -54,6 +54,7 @@ export default class CategoriesReport extends Component {
 				<ReportSummary
 					charts={ charts }
 					endpoint="products"
+					isRequesting={ isRequesting }
 					query={ chartQuery }
 					selectedChart={ getSelectedChart( query.chart, charts ) }
 				/>
@@ -64,6 +65,7 @@ export default class CategoriesReport extends Component {
 					endpoint="products"
 					path={ path }
 					query={ chartQuery }
+					isRequesting={ isRequesting }
 					itemsLabel={ itemsLabel }
 					selectedChart={ getSelectedChart( query.chart, charts ) }
 				/>

diff --git a/client/analytics/report/coupons/index.js b/client/analytics/report/coupons/index.js
@@ -54,6 +54,7 @@ export default class CouponsReport extends Component {
 				<ReportSummary
 					charts={ charts }
 					endpoint="coupons"
+					isRequesting={ isRequesting }
 					query={ chartQuery }
 					selectedChart={ getSelectedChart( query.chart, charts ) }
 				/>
@@ -64,6 +65,7 @@ export default class CouponsReport extends Component {
 					endpoint="coupons"
 					path={ path }
 					query={ chartQuery }
+					isRequesting={ isRequesting }
 					itemsLabel={ itemsLabel }
 					selectedChart={ getSelectedChart( query.chart, charts ) }
 				/>

diff --git a/client/analytics/report/products/index.js b/client/analytics/report/products/index.js
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 /**
  * WooCommerce dependencies
  */
-import { ReportFilters, SummaryListPlaceholder, ChartPlaceholder } from '@woocommerce/components';
+import { ReportFilters } from '@woocommerce/components';
 
 /**
  * Internal dependencies
@@ -62,24 +62,6 @@ class ProductsReport extends Component {
 			return <ReportError isError />;
 		}
 
-		if ( isRequesting ) {
-			return (
-				<Fragment>
-					<ReportFilters query={ query } path={ path } filters={ filters } />
-					<SummaryListPlaceholder numberOfItems={ charts.length } />
-					<span className="screen-reader-text">
-						{ __( 'Your requested data is loading', 'wc-admin' ) }
-					</span>
-					<div className="woocommerce-chart">
-						<div className="woocommerce-chart__body">
-							<ChartPlaceholder height={ 220 } />
-						</div>
-					</div>
-					<ProductsReportTable isRequesting={ true } query={ query } />
-				</Fragment>
-			);
-		}
-
 		const chartQuery = {
 			...query,
 		};
@@ -95,6 +77,7 @@ class ProductsReport extends Component {
 					mode={ mode }
 					charts={ charts }
 					endpoint="products"
+					isRequesting={ isRequesting }
 					query={ chartQuery }
 					selectedChart={ getSelectedChart( query.chart, charts ) }
 				/>
@@ -103,15 +86,16 @@ class ProductsReport extends Component {
 					filters={ filters }
 					charts={ charts }
 					endpoint="products"
+					isRequesting={ isRequesting }
 					itemsLabel={ itemsLabel }
 					path={ path }
 					query={ chartQuery }
 					selectedChart={ getSelectedChart( chartQuery.chart, charts ) }
 				/>
 				{ isSingleProductVariable ? (
-					<VariationsReportTable query={ query } />
+					<VariationsReportTable isRequesting={ isRequesting } query={ query } />
 				) : (
-					<ProductsReportTable query={ query } />
+					<ProductsReportTable isRequesting={ isRequesting } query={ query } />
 				) }
 			</Fragment>
 		);

diff --git a/client/analytics/report/products/table-variations.js b/client/analytics/report/products/table-variations.js
@@ -161,7 +161,7 @@ export default class VariationsReportTable extends Component {
 	}
 
 	render() {
-		const { query } = this.props;
+		const { isRequesting, query } = this.props;
 
 		const labels = {
 			helpText: __( 'Select at least two variations to compare', 'wc-admin' ),
@@ -175,6 +175,7 @@ export default class VariationsReportTable extends Component {
 				endpoint="variations"
 				getHeadersContent={ this.getHeadersContent }
 				getRowsContent={ this.getRowsContent }
+				isRequesting={ isRequesting }
 				itemIdField="variation_id"
 				labels={ labels }
 				query={ query }

diff --git a/client/analytics/report/taxes/index.js b/client/analytics/report/taxes/index.js
@@ -50,6 +50,7 @@ export default class TaxesReport extends Component {
 				<ReportSummary
 					charts={ charts }
 					endpoint="taxes"
+					isRequesting={ isRequesting }
 					query={ chartQuery }
 					selectedChart={ getSelectedChart( query.chart, charts ) }
 				/>
@@ -60,6 +61,7 @@ export default class TaxesReport extends Component {
 					endpoint="taxes"
 					query={ chartQuery }
 					path={ path }
+					isRequesting={ isRequesting }
 					itemsLabel={ itemsLabel }
 					selectedChart={ getSelectedChart( query.chart, charts ) }
 				/>

diff --git a/packages/components/src/table/index.js b/packages/components/src/table/index.js
@@ -4,7 +4,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import { Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import { find, first, isEqual, noop, partial, uniq, without } from 'lodash';
 import { IconButton } from '@wordpress/components';
 import PropTypes from 'prop-types';
@@ -332,14 +332,19 @@ class TableCard extends Component {
 				}
 			>
 				{ isLoading ? (
-					<TablePlaceholder
-						numberOfRows={ rowsPerPage }
-						headers={ headers }
-						rowHeader={ rowHeader }
-						caption={ title }
-						query={ query }
-						onSort={ onQueryChange( 'sort' ) }
-					/>
+					<Fragment>
+						<span className="screen-reader-text">
+							{ __( 'Your requested data is loading', 'wc-admin' ) }
+						</span>
+						<TablePlaceholder
+							numberOfRows={ rowsPerPage }
+							headers={ headers }
+							rowHeader={ rowHeader }
+							caption={ title }
+							query={ query }
+							onSort={ onQueryChange( 'sort' ) }
+						/>
+					</Fragment>
 				) : (
 					<Table
 						rows={ rows }