Add loading state for the all domain list item component

[olaseni]

Changes proposed in this Pull Request

• Adds the isLoadingDomainDetails to denote the loading status for DomainItem components.
• Uses placeholders for action items while isLoadingDomainDetails is true.

[matticbot]

Test live: https://calypso.live/?branch=add/domains-add-loading-state-for-the-all-domain-list-item-component

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~458 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
domains                      +896 B  (+0.1%)     +132 B  (+0.1%)
zoninator                     +66 B  (+0.0%)       +7 B  (+0.0%)
wp-super-cache                +66 B  (+0.0%)       +7 B  (+0.0%)
woocommerce                   +66 B  (+0.0%)       +7 B  (+0.0%)
themes                        +66 B  (+0.0%)       +7 B  (+0.0%)
theme                         +66 B  (+0.0%)       +7 B  (+0.0%)
stats                         +66 B  (+0.0%)       +7 B  (+0.0%)
sites                         +66 B  (+0.1%)       +7 B  (+0.0%)
signup                        +66 B  (+0.0%)      +10 B  (+0.0%)
settings-writing              +66 B  (+0.0%)       +7 B  (+0.0%)
settings-security             +66 B  (+0.0%)       +7 B  (+0.0%)
settings-performance          +66 B  (+0.0%)       +7 B  (+0.0%)
settings-jetpack              +66 B  (+0.0%)       +7 B  (+0.0%)
settings-discussion           +66 B  (+0.0%)       +7 B  (+0.0%)
settings                      +66 B  (+0.0%)       +7 B  (+0.0%)
sensei                        +66 B  (+0.1%)       +7 B  (+0.0%)
scan                          +66 B  (+0.0%)       +7 B  (+0.0%)
purchases                     +66 B  (+0.0%)      +10 B  (+0.0%)
preview                       +66 B  (+0.0%)       +7 B  (+0.0%)
posts-custom                  +66 B  (+0.0%)       +7 B  (+0.0%)
posts                         +66 B  (+0.0%)       +7 B  (+0.0%)
post-editor                   +66 B  (+0.0%)       +7 B  (+0.0%)
plugins                       +66 B  (+0.0%)       +7 B  (+0.0%)
plans                         +66 B  (+0.0%)       +5 B  (+0.0%)
people                        +66 B  (+0.0%)       +7 B  (+0.0%)
pages                         +66 B  (+0.0%)       +7 B  (+0.0%)
migrate                       +66 B  (+0.1%)       +7 B  (+0.0%)
media                         +66 B  (+0.0%)       +7 B  (+0.0%)
marketing                     +66 B  (+0.0%)       +7 B  (+0.0%)
jetpack-connect               +66 B  (+0.0%)       +6 B  (+0.0%)
jetpack-cloud-settings        +66 B  (+0.1%)       +7 B  (+0.0%)
import                        +66 B  (+0.0%)       +7 B  (+0.0%)
hosting                       +66 B  (+0.0%)       +7 B  (+0.0%)
home                          +66 B  (+0.0%)       +9 B  (+0.0%)
hello-dolly                   +66 B  (+0.1%)       +7 B  (+0.0%)
gutenberg-editor              +66 B  (+0.0%)       +7 B  (+0.0%)
google-my-business            +66 B  (+0.0%)       +7 B  (+0.0%)
feature-upsell                +66 B  (+0.0%)       +7 B  (+0.0%)
export                        +66 B  (+0.0%)       +7 B  (+0.0%)
email                         +66 B  (+0.0%)       +7 B  (+0.0%)
earn                          +66 B  (+0.0%)       +7 B  (+0.0%)
customize                     +66 B  (+0.0%)       +7 B  (+0.0%)
concierge                     +66 B  (+0.0%)       +7 B  (+0.0%)
comments                      +66 B  (+0.0%)       +7 B  (+0.0%)
checkout                      +66 B  (+0.0%)       +6 B  (+0.0%)
backup                        +66 B  (+0.0%)       +7 B  (+0.0%)
activity                      +66 B  (+0.0%)       +7 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~9 bytes added 📈 [gzipped])

name                       parsed_size           gzip_size
async-load-reader-sidebar        +66 B  (+0.1%)       +9 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[hambai]

Actually my idea was to also create the actual domain item component render method that should show fading placeholders while the data is loading

[stephanethomas]

Changes look good to me, and work fine. Could you please add testing instructions next time? It took me some time to understand what pieces were changed, and how to access them. I've also found that adding a screenshot to help a lot for reviews.

[olaseni]

Changes look good to me, and work fine. Could you please add testing instructions next time? It took me some time to understand what pieces were changed, and how to access them. I've also found that adding a screenshot to help a lot for reviews.

My bad. The task evolved after the initial review. I should have added the new instructions.