Theme showcase: Improve loading state

client/components/theme/style.scss

@@ -1,6 +1,6 @@
 $theme-info-height: 54px;
 
-.theme {
+.card.theme-card {
 	&.is-placeholder {
 		background-color: var(--color-neutral-10);
 		animation: loading-fade 1.6s ease-in-out infinite;

client/components/themes-list/README.md

@@ -12,6 +12,4 @@ Other accepted props are two boolean flags and a callback, all of which are rela
 
 ## Props
 
-- `emptyContent`: element ( optional ), element that will be displayed when the list is empty, if null or not provided default EmptyContent will be used.
-
 For a complete list of props along with their types, please refer to the `ThemesList` component's `propTypes` member.

client/my-sites/themes/single-site-jetpack.jsx

@@ -41,7 +41,6 @@ const ConnectedSingleSiteJetpack = connectOptions( ( props ) => {
 	const {
 		currentPlan,
 		currentThemeId,
-		emptyContent,
 		filter,
 		getScreenshotOption,
 		isAtomic,
@@ -143,7 +142,6 @@ const ConnectedSingleSiteJetpack = connectOptions( ( props ) => {
 							} }
 							trackScrollPage={ props.trackScrollPage }
 							source="wpcom"
-							emptyContent={ emptyContent }
 							upsellUrl={ upsellUrl }
 							forceWpOrgSearch
 						/>
@@ -164,7 +162,6 @@ export default connect( ( state, { siteId, tier } ) => {
 		currentThemeId,
 		tier,
 		showWpcomThemesList,
-		emptyContent: null,
 		isAtomic: isAtomicSite( state, siteId ),
 		isMultisite,
 		isPossibleJetpackConnectionProblem: isJetpackConnectionProblem( state, siteId ),

client/my-sites/themes/test/logged-out.jsx

@@ -98,6 +98,14 @@ describe( 'logged-out', () => {
 	test( 'renders without error when no themes are present', async () => {
 		const store = createReduxStore();
 		setStore( store );
+		store.dispatch(
+			receiveThemes(
+				[],
+				'wpcom',
+				{ ...DEFAULT_THEME_QUERY, collection: 'recommended' },
+				themes.length
+			)
+		);
 		render( <TestComponent store={ store } /> );
 
 		await waitFor( () => {
@@ -133,7 +141,7 @@ describe( 'logged-out', () => {
 		store.dispatch( {
 			type: THEMES_REQUEST_FAILURE,
 			siteId: 'wpcom',
-			query: {},
+			query: { ...DEFAULT_THEME_QUERY, collection: 'recommended' },
 			error: 'Error',
 		} );
 		render( <TestComponent store={ store } /> );

client/my-sites/themes/theme-showcase.jsx

@@ -81,7 +81,6 @@ class ThemeShowcase extends Component {
 	}
 
 	static propTypes = {
-		emptyContent: PropTypes.element,
 		tier: PropTypes.oneOf( [ '', 'free', 'premium', 'marketplace' ] ),
 		search: PropTypes.string,
 		pathName: PropTypes.string,
@@ -104,7 +103,6 @@ class ThemeShowcase extends Component {
 	static defaultProps = {
 		tier: '',
 		search: '',
-		emptyContent: null,
 		upsellBanner: false,
 		showUploadButton: true,
 	};
@@ -490,7 +488,6 @@ class ThemeShowcase extends Component {
 			},
 			getActionLabel: ( theme ) => getScreenshotOption( theme ).label,
 			trackScrollPage: this.props.trackScrollPage,
-			emptyContent: this.props.emptyContent,
 			scrollToSearchInput: this.scrollToSearchInput,
 			getOptions: ( theme ) =>
 				pickBy(

client/my-sites/themes/themes-selection.jsx

@@ -35,7 +35,6 @@ import './themes-selection.scss';
 
 class ThemesSelection extends Component {
 	static propTypes = {
-		emptyContent: PropTypes.element,
 		getOptions: PropTypes.func,
 		getActionLabel: PropTypes.func,
 		incrementPage: PropTypes.func,
@@ -62,7 +61,6 @@ class ThemesSelection extends Component {
 	};
 
 	static defaultProps = {
-		emptyContent: null,
 		showUploadButton: true,
 		forceWpOrgSearch: false,
 	};
@@ -276,7 +274,6 @@ class ThemesSelection extends Component {
 					getPrice={ this.props.getPremiumThemePrice }
 					isInstalling={ this.props.isInstallingTheme }
 					loading={ isRequesting }
-					emptyContent={ this.props.emptyContent }
 					placeholderCount={ this.props.placeholderCount }
 					bookmarkRef={ this.props.bookmarkRef }
 					siteId={ siteId }
@@ -320,18 +317,7 @@ function bindGetThemeType( state ) {
 export const ConnectedThemesSelection = connect(
 	(
 		state,
-		{
-			filter,
-			page,
-			search,
-			tier,
-			vertical,
-			siteId,
-			source,
-			forceWpOrgSearch,
-			isLoading: isCustomizedThemeListLoading,
-			tabFilter,
-		}
+		{ filter, page, search, tier, vertical, siteId, source, forceWpOrgSearch, tabFilter }
 	) => {
 		const isJetpack = isJetpackSite( state, siteId );
 		const isAtomic = isSiteAutomatedTransfer( state, siteId );
@@ -370,7 +356,7 @@ export const ConnectedThemesSelection = connect(
 			...( tabFilter === 'all' && { sort: 'date' } ),
 		};
 
-		const themes = getThemesForQueryIgnoringPage( state, sourceSiteId, query ) || [];
+		const themes = getThemesForQueryIgnoringPage( state, sourceSiteId, query );
 
 		const shouldFetchWpOrgThemes =
 			forceWpOrgSearch &&
@@ -401,9 +387,9 @@ export const ConnectedThemesSelection = connect(
 			source: sourceSiteId,
 			siteId: siteId,
 			siteSlug: getSiteSlug( state, siteId ),
-			themes,
+			themes: themes || [],
 			isRequesting:
-				isCustomizedThemeListLoading ||
+				themes === null ||
 				isRequestingThemesForQuery( state, sourceSiteId, query ) ||
 				( shouldFetchWpOrgThemes && isRequestingThemesForQuery( state, 'wporg', wpOrgQuery ) ),
 			isLastPage: isThemesLastPageForQuery( state, sourceSiteId, query ),

client/state/themes/reducer.js

@@ -367,6 +367,21 @@ const queriesReducer = ( state = {}, action ) => {
 				() => new ThemeQueryManager( null, { itemKey: 'id' } )
 			);
 		}
+		case THEMES_REQUEST_FAILURE: {
+			const { siteId, query } = action;
+			return withQueryManager(
+				state,
+				siteId,
+				( m ) =>
+					m.receive( [], {
+						query,
+						found: 0,
+						patch: true,
+						dontShareQueryResultsWhenQueriesAreDifferent: true,
+					} ),
+				() => new ThemeQueryManager( null, { itemKey: 'id' } )
+			);
+		}
 		case THEME_DELETE_SUCCESS: {
 			const { siteId, themeId } = action;
 			return withQueryManager( state, siteId, ( m ) => m.removeItem( themeId ) );