Theme showcase: Improve loading state

[mmtr]

Fixes #80608

Proposed Changes

• Prevents the "no themes found" banner from showing when first loading the theme showcase
• Fixes the styles of the placeholder cards so they are displayed with a pulsating grey background again
• Removes the emptyContent prop from the ThemeList component since it is no longer used

Before

Screen.Recording.2023-08-23.at.13.47.53.mov

After

Screen.Recording.2023-08-23.at.13.48.41.mov

Testing Instructions

• Open the Calypso live link below on a incognito window
  • If you prefer to run Calypso locally, make sure to enable the SSR mode.
• Set your browser's throttling to 3G.
• Go to /themes.
• Make sure the "no themes found" banner is not displayed. You should see a list of placeholders instead.
• Disable the throttling to no longer block the ongoing requests.
• Make sure the placeholders are replaced with the actual theme cards.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-78412

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-78412&env=jetpack

[matticbot]

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

Sections (~91 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
write-flow                            +183 B  (+0.0%)      +15 B  (+0.0%)
with-theme-assembler-flow             +183 B  (+0.3%)      +15 B  (+0.1%)
videopress-flow                       +183 B  (+0.0%)      +15 B  (+0.0%)
update-design-flow                    +183 B  (+0.0%)      +15 B  (+0.0%)
theme                                 +183 B  (+0.0%)      +15 B  (+0.0%)
site-setup-flow                       +183 B  (+0.0%)      +13 B  (+0.0%)
site-purchases                        +183 B  (+0.0%)      +15 B  (+0.0%)
signup                                +183 B  (+0.1%)      +15 B  (+0.0%)
scan                                  +183 B  (+0.0%)      +19 B  (+0.0%)
purchases                             +183 B  (+0.0%)      +15 B  (+0.0%)
plugins                               +183 B  (+0.0%)      +15 B  (+0.0%)
plugin-bundle-flow                    +183 B  (+0.1%)      +16 B  (+0.0%)
pages                                 +183 B  (+0.0%)      +15 B  (+0.0%)
marketplace                           +183 B  (+0.0%)      +15 B  (+0.0%)
link-in-bio-tld-flow                  +183 B  (+0.0%)      +15 B  (+0.0%)
jetpack-connect                       +183 B  (+0.0%)      +15 B  (+0.0%)
jetpack-cloud-plugin-management       +183 B  (+0.0%)      +15 B  (+0.0%)
import-flow                           +183 B  (+0.0%)      +13 B  (+0.0%)
hosting                               +183 B  (+0.0%)      +15 B  (+0.0%)
home                                  +183 B  (+0.0%)      +15 B  (+0.0%)
gutenberg-editor                      +183 B  (+0.0%)      +18 B  (+0.0%)
free-flow                             +183 B  (+0.0%)      +15 B  (+0.0%)
customize                             +183 B  (+0.1%)      +16 B  (+0.0%)
checkout                              +183 B  (+0.0%)      +15 B  (+0.0%)
build-flow                            +183 B  (+0.0%)      +15 B  (+0.0%)
backup                                +183 B  (+0.0%)      +19 B  (+0.0%)
accept-invite                         +183 B  (+0.0%)      +15 B  (+0.0%)
themes                                 +20 B  (+0.0%)      -21 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 (~31 bytes added 📈 [gzipped])

name                                                      parsed_size           gzip_size
async-load-design-blocks                                       +183 B  (+0.0%)      +14 B  (+0.0%)
async-load-calypso-blocks-product-purchase-features-list       +183 B  (+0.4%)      +17 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.

[BogdanUngureanu]

LGTM! 🎉