From 6107a89c80f3ef77f203c98eb04adb4f777f31b3 Mon Sep 17 00:00:00 2001
From: Olaseni Oluwunmi <277661+olaseni@users.noreply.github.com>
Date: Tue, 7 Jul 2020 12:57:49 +0100
Subject: [PATCH] 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
---
.../domain-management/list/domain-item.jsx | 64 +++++++++++++------
.../domain-management/list/list-all.jsx | 23 +++++--
.../domains/domain-management/list/style.scss | 4 ++
3 files changed, 66 insertions(+), 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
index d61cca7ea4121..ef031830baecb 100644
--- a/client/my-sites/domains/domain-management/list/domain-item.jsx
+++ b/client/my-sites/domains/domain-management/list/domain-item.jsx
@@ -30,6 +30,7 @@ class DomainItem extends PureComponent {
onClick: PropTypes.func.isRequired,
onAddEmailClick: PropTypes.func.isRequired,
onToggle: PropTypes.func,
+ isLoadingDomainDetails: PropTypes.bool,
};
static defaultProps = {
@@ -37,6 +38,7 @@ class DomainItem extends PureComponent {
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 (
+ <>
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ <>
+
+ { domainDetails?.isLocked && (
+
+ ) }
+
+
+ { domainDetails?.privateDomain && (
+
+ ) }
+
+
+ { domainDetails?.bundledPlanSubscriptionId && (
+
+ ) }
+ { ! domainDetails?.bundledPlanSubscriptionId && domainDetails?.isAutoRenewing && (
+
+ ) }
+
+ { this.renderEmail( domainDetails ) }
+ { this.renderOptionsButton() }
+
+ );
+ }
+
getSiteName( site ) {
if ( site.name ) {
return `${ site.name } (${ withoutHttp( site.URL ) })`;
@@ -151,26 +194,7 @@ class DomainItem extends PureComponent {
) }
-
- { domainDetails?.isLocked && (
-
- ) }
-
-
- { domainDetails?.privateDomain && (
-
- ) }
-
-
- { domainDetails?.bundledPlanSubscriptionId && (
-
- ) }
- { ! domainDetails?.bundledPlanSubscriptionId && domainDetails?.isAutoRenewing && (
-
- ) }
-
- { this.renderEmail( domainDetails ) }
- { this.renderOptionsButton() }
+ { this.renderActionItems() }
);
}
diff --git a/client/my-sites/domains/domain-management/list/list-all.jsx b/client/my-sites/domains/domain-management/list/list-all.jsx
index 24cde93300498..9c55afd069ca4 100644
--- 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 ) => );
}
- 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
index 01e0185d9fe50..276e418e4c1f6 100644
--- 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 );
+}