Theme Showcase: Pricing Dropdown Not Populated

[Copons]

Steps to reproduce

1. Starting at URL: https://wordpress.com/themes/
2. Check the pricing dropdown.

What I expected

To see the pricing dropdown populated with all the theme tiers.

What happened instead

The pricing dropdown only contains the "All" tier which is hardcoded.

Browser / OS version

Chrome 123 / MacOS 14.2.1

Screenshot / Video

Here's an example of the fully populated dropdown:

Context / Source

This happens infrequently and without a clear pattern, but it does happen.

My guess is that it tends to happen on sites with a cold cache, calling the Dotcom API many times to populate the Theme Showcase; somehow, React might miss a Redux update, failing to re-render the dropdown.

manual-testing

[xavier-lc]

I see it happening only in Brave, where state.themes.themeTiers is an empty object, will investigate why it's happening.

[Copons]

Thanks @xavier-lc!

It has happened to me on Chrome (100% sure) and Firefox (80% sure: I've used Firefox as my main browser for a couple of months during the Tiers project, but that's been a while ago).

I don't think it's browser-related, though. More like a side effect of the Showcase code being a bit of an unoptimized mess. 🤔

[Copons]

Or, maybe, the themeTiers reducer is skipped in some cases. For example, tiers are returned in the same response as the themes data. But what if themes are cached and Calypso doesn't call the API? IIRC tiers are not cached (persisted in the local storage or IndexedDB), so in that case the list would be empty. This would also explain why the tiers list gets populated upon changing tab.

[xavier-lc]

For example, tiers are returned in the same response as the themes data. But what if themes are cached and Calypso doesn't call the API? IIRC tiers are not cached (persisted in the local storage or IndexedDB), so in that case the list would be empty.

It could be, yeah 👍

[dsas]

Seems like it is exactly that.

If I go to /themes without any state then themes.themeTiers is empty until after the /rest/v1.2/themes API calls have returned.

If I refresh and click around whatnot then eventually calypso decides not to make the /rest/v1.2/themes API calls. In this case the themes.queries.wpcom state item is set by one of the APPLY_STORED_STATE actions but it does not set the theme tiers. Neither do any of the subsequent actions.

[Copons]

Fixed by #89651 and D145830-code