Fix a number of crashes that occur in reports when Gutenberg is active (https://github.com/woocommerce/woocommerce-admin/pull/5409)

Also fix a blank screen issue with rendering reports.

Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com>

plugins/woocommerce-admin/client/analytics/components/report-summary/index.js

@@ -38,8 +38,11 @@ export class ReportSummary extends Component {
 		const { emptySearchResults, summaryData } = this.props;
 		const { totals } = summaryData;
 
-		const primaryValue = emptySearchResults ? 0 : totals.primary[ key ];
-		const secondaryValue = emptySearchResults ? 0 : totals.secondary[ key ];
+		const primaryTotal = totals.primary ? totals.primary[ key ] : 0;
+		const secondaryTotal = totals.secondary ? totals.secondary[ key ] : 0;
+
+		const primaryValue = emptySearchResults ? 0 : primaryTotal;
+		const secondaryValue = emptySearchResults ? 0 : secondaryTotal;
 
 		return {
 			delta: calculateDelta( primaryValue, secondaryValue ),

plugins/woocommerce-admin/client/analytics/components/report-table/index.js

@@ -617,11 +617,12 @@ export default compose(
 
 		return {
 			primaryData,
-			ids: itemIdField
-				? extendedTableData.items.data.map(
-						( item ) => item[ itemIdField ]
-				  )
-				: [],
+			ids:
+				itemIdField && extendedTableData.items.data
+					? extendedTableData.items.data.map(
+							( item ) => item[ itemIdField ]
+					  )
+					: [],
 			tableData: extendedTableData,
 			query: { ...tableQuery, ...query },
 		};

plugins/woocommerce-admin/client/analytics/report/customers/table.js

@@ -116,7 +116,7 @@ class CustomersReportTable extends Component {
 			getCurrencyConfig,
 		} = this.context;
 
-		return customers.map( ( customer ) => {
+		return customers?.map( ( customer ) => {
 			const {
 				avg_order_value: avgOrderValue,
 				date_last_active: dateLastActive,

plugins/woocommerce-admin/client/analytics/report/stock/table.js

@@ -55,7 +55,7 @@ class StockReportTable extends Component {
 		];
 	}
 
-	getRowsContent( products ) {
+	getRowsContent( products = [] ) {
 		const { query } = this.props;
 		const persistedQuery = getPersistedQuery( query );
 

plugins/woocommerce-admin/client/layout/controller.js

@@ -150,6 +150,7 @@ export const getPages = () => {
 export class Controller extends Component {
 	componentDidMount() {
 		window.document.documentElement.scrollTop = 0;
+		window.document.body.classList.remove( 'woocommerce-admin-is-loading' );
 	}
 
 	componentDidUpdate( prevProps ) {

plugins/woocommerce-admin/packages/data/src/items/utils.js

@@ -57,9 +57,8 @@ export function getLeaderboard( options ) {
 	}
 
 	const leaderboard = leaderboards.get( options.id );
-	return { ...response, rows: leaderboard.rows };
+	return { ...response, rows: leaderboard?.rows };
 }
-
 /**
  * Returns items based on a search query.
  *