Setup the loading state for DomainItem items

Automattic · Jul 2, 2020 · 43501a2 · 43501a2
1 parent e4ef318
commit 43501a2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/client/my-sites/domains/domain-management/list/domain-item.jsx b/client/my-sites/domains/domain-management/list/domain-item.jsx
@@ -28,15 +28,15 @@ class DomainItem extends PureComponent {
 		onClick: PropTypes.func.isRequired,
 		onAddEmailClick: PropTypes.func.isRequired,
 		onToggle: PropTypes.func,
-		isLoadingExtendedData: PropTypes.bool,
+		isLoadingDomainDetails: PropTypes.bool,
 	};
 
 	static defaultProps = {
 		isManagingAllSites: false,
 		showSite: false,
 		showCheckbox: false,
 		onToggle: null,
-		isLoadingExtendedData: false,
+		isLoadingDomainDetails: false,
 	};
 
 	handleClick = () => {

diff --git a/client/my-sites/domains/domain-management/list/list-all.jsx b/client/my-sites/domains/domain-management/list/list-all.jsx
@@ -20,7 +20,11 @@ import DocumentHead from 'components/data/document-head';
 import DomainItem from './domain-item';
 import ListHeader from './list-header';
 import FormattedHeader from 'components/formatted-header';
-import { getAllDomains, getFlatDomainsList } from 'state/sites/domains/selectors';
+import {
+	getAllDomains,
+	getFlatDomainsList,
+	getAllRequestingSiteDomains,
+} from 'state/sites/domains/selectors';
 import { getCurrentUser } from 'state/current-user/selectors';
 import { getCurrentRoute } from 'state/selectors/get-current-route';
 import { getDomainManagementPath } from './utils';
@@ -47,6 +51,7 @@ class ListAll extends Component {
 		sites: PropTypes.object.isRequired,
 		user: PropTypes.object.isRequired,
 		addDomainClick: PropTypes.func.isRequired,
+		isRequestingAllSiteDomains: PropTypes.object,
 	};
 
 	clickAddDomain = () => {
@@ -94,7 +99,13 @@ class ListAll extends Component {
 			return times( 3, ( n ) => <ListItemPlaceholder key={ `item-${ n }` } /> );
 		}
 
-		const { domainsList, sites, domainsDetails, canManageSitesMap } = this.props;
+		const {
+			domainsList,
+			sites,
+			domainsDetails,
+			canManageSitesMap,
+			isRequestingAllSiteDomains,
+		} = this.props;
 
 		const domainListItems = domainsList
 			.filter(
@@ -108,6 +119,7 @@ class ListAll extends Component {
 						domainDetails={ this.findDomainDetails( domainsDetails, domain ) }
 						site={ sites[ domain?.blogId ] }
 						isManagingAllSites={ true }
+						isLoadingDomainDetails={ isRequestingAllSiteDomains[ domain?.blogId ] ?? false }
 						showSite={ true }
 						onClick={ this.handleDomainItemClick }
 						onAddEmailClick={ this.handleAddEmailClick }
@@ -155,6 +167,7 @@ export default connect(
 			domainsList: getFlatDomainsList( state ),
 			domainsDetails: getAllDomains( state ),
 			requestingDomains: isRequestingAllDomains( state ),
+			isRequestingAllSiteDomains: getAllRequestingSiteDomains( state ),
 			sites,
 			user: getCurrentUser( state ),
 		};