Add loading state for the all domain list item component (#43864)

* Renamed loading state prop/name * Setup the loading state for `DomainItem` items * Install placeholders for action items * Renamed state booleans
Automattic · Jul 7, 2020 · 6107a89 · 6107a89
1 parent 0cc47a1
commit 6107a89
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 25 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
@@ -30,13 +30,15 @@ class DomainItem extends PureComponent {
 		onClick: PropTypes.func.isRequired,
 		onAddEmailClick: PropTypes.func.isRequired,
 		onToggle: PropTypes.func,
+		isLoadingDomainDetails: PropTypes.bool,
 	};
 
 	static defaultProps = {
 		isManagingAllSites: false,
 		showSite: false,
 		showCheckbox: false,
 		onToggle: null,
+		isLoadingDomainDetails: false,
 	};
 
 	handleClick = () => {
@@ -110,6 +112,47 @@ class DomainItem extends PureComponent {
 		);
 	}
 
+	renderActionItems() {
+		const { isLoadingDomainDetails, domainDetails } = this.props;
+
+		if ( isLoadingDomainDetails ) {
+			return (
+				<>
+					<div className="list__domain-transfer-lock list__action_item_placeholder" />
+					<div className="list__domain-privacy list__action_item_placeholder" />
+					<div className="list__domain-auto-renew list__action_item_placeholder" />
+					<div className="list__domain-email list__action_item_placeholder" />
+					<div className="list__domain-options list__action_item_placeholder" />
+				</>
+			);
+		}
+
+		return (
+			<>
+				<div className="list__domain-transfer-lock">
+					{ domainDetails?.isLocked && (
+						<Gridicon className="domain-item__icon" size={ 18 } icon="checkmark" />
+					) }
+				</div>
+				<div className="list__domain-privacy">
+					{ domainDetails?.privateDomain && (
+						<Gridicon className="domain-item__icon" size={ 18 } icon="checkmark" />
+					) }
+				</div>
+				<div className="list__domain-auto-renew">
+					{ domainDetails?.bundledPlanSubscriptionId && (
+						<Gridicon className="domain-item__icon" size={ 18 } icon="minus" />
+					) }
+					{ ! domainDetails?.bundledPlanSubscriptionId && domainDetails?.isAutoRenewing && (
+						<Gridicon className="domain-item__icon" size={ 18 } icon="checkmark" />
+					) }
+				</div>
+				<div className="list__domain-email">{ this.renderEmail( domainDetails ) }</div>
+				{ this.renderOptionsButton() }
+			</>
+		);
+	}
+
 	getSiteName( site ) {
 		if ( site.name ) {
 			return `${ site.name } (${ withoutHttp( site.URL ) })`;
@@ -151,26 +194,7 @@ class DomainItem extends PureComponent {
 						</div>
 					) }
 				</div>
-				<div className="list__domain-transfer-lock">
-					{ domainDetails?.isLocked && (
-						<Gridicon className="domain-item__icon" size={ 18 } icon="checkmark" />
-					) }
-				</div>
-				<div className="list__domain-privacy">
-					{ domainDetails?.privateDomain && (
-						<Gridicon className="domain-item__icon" size={ 18 } icon="checkmark" />
-					) }
-				</div>
-				<div className="list__domain-auto-renew">
-					{ domainDetails?.bundledPlanSubscriptionId && (
-						<Gridicon className="domain-item__icon" size={ 18 } icon="minus" />
-					) }
-					{ ! domainDetails?.bundledPlanSubscriptionId && domainDetails?.isAutoRenewing && (
-						<Gridicon className="domain-item__icon" size={ 18 } icon="checkmark" />
-					) }
-				</div>
-				<div className="list__domain-email">{ this.renderEmail( domainDetails ) }</div>
-				{ this.renderOptionsButton() }
+				{ this.renderActionItems() }
 			</CompactCard>
 		);
 	}

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,
+		requestingSiteDomains: PropTypes.object,
 	};
 
 	clickAddDomain = () => {
@@ -79,8 +84,8 @@ class ListAll extends Component {
 	}
 
 	isLoading() {
-		const { domainsList, requestingDomains, sites } = this.props;
-		return ! sites || ( requestingDomains && domainsList.length === 0 );
+		const { domainsList, requestingFlatDomains, sites } = this.props;
+		return ! sites || ( requestingFlatDomains && domainsList.length === 0 );
 	}
 
 	findDomainDetails( domainsDetails = [], domain = {} ) {
@@ -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,
+			requestingSiteDomains,
+		} = 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={ requestingSiteDomains[ domain?.blogId ] ?? false }
 						showSite={ true }
 						onClick={ this.handleDomainItemClick }
 						onAddEmailClick={ this.handleAddEmailClick }
@@ -154,7 +166,8 @@ export default connect(
 			currentRoute: getCurrentRoute( state ),
 			domainsList: getFlatDomainsList( state ),
 			domainsDetails: getAllDomains( state ),
-			requestingDomains: isRequestingAllDomains( state ),
+			requestingFlatDomains: isRequestingAllDomains( state ),
+			requestingSiteDomains: getAllRequestingSiteDomains( state ),
 			sites,
 			user: getCurrentUser( state ),
 		};

diff --git a/client/my-sites/domains/domain-management/list/style.scss b/client/my-sites/domains/domain-management/list/style.scss
@@ -258,3 +258,7 @@ input[type='radio'].domain-management-list-item__radio {
 .domain-item__icon {
 	fill: var( --color-text-subtle );
 }
+
+.list__action_item_placeholder {
+	@include placeholder( --color-neutral-5 );
+}