Plugins Marketplace: inconsistent states in the 'Manage Sites' modal

[javierarce]

Quick summary

Clicking on the "Manage Sites" button in the plugin overview page displays a modal with different options depending on the state of the requests.

In this video, the modal presents 3 different states, even after the requests have finished:

CleanShot.2024-08-22.at.09.43.19-converted.mp4

A possible solution would be to display a loading state in the plugin sidebar or inside the modal.

Steps to reproduce

1. Go to /plugins
2. Click on a plugin that has been installed in multiple sites (eg: https://wordpress.com/plugins/woocommerce)
3. Wait until the banner on the right side displays the number of sites

Compare that modal with the one you get if you reload the page and immediately click the "Manage Sites" button.

What you expected to happen

I'd expect the modal contained the same information, regardless of when I clicked the button.

What actually happened

If I wait until all the data is loaded, the modal gives me more options to manage the plugin.

Impact

All

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

The only workaround for the user is to wait until the requests in the plugin page have finished.

Platform (Simple and/or Atomic)

No response

Logs or notes

No response

[davemart-in]

@javierarce Is there an existing pattern for showing an inline loader if we wanted to show one in the sidebar? Would we disable the button?

[javierarce]

I think the most common pattern we are using across the platform is skeleton loaders. We are using something like this in the admin to display the sidebar, but in that location the loading is much faster because it doesn't need to retrieve information about other sites.

CleanShot.2024-08-22.at.16.13.46.mp4

I've also seen the loading state of the button used as a section loading state (I don't remember where, though). I think this solution could make more sense in our case because there's some information we have available when the user enters this page and the rest of the data takes a while to load:

CleanShot.2024-08-22.at.16.11.14.mp4

Figma file: wCm5Tzb7JBaG4WNowWbjES-fi-4947_28130

[davemart-in]

Let's proceed with the second one then (the button loader). Thanks @javierarce!

[epeicher]

Hi @javierarce, are you working on this? If not, I can try to tackle it

[davemart-in]

@epeicher sorry, I forgot to remove @javierarce when I moved this over from "Needs design" to "Ready for Dev". Please feel free to pick it up. Thanks!