Jetpack: (3P) External Media: Load More error separated from action

[jeryj]

Steps to reproduce the issue

1. Add an image block
2. Click on Select Image
3. Click on Pexels
4. Click Load More at the bottom of the modal
5. In Network Dev Tools, set your browser to offline
6. Click Load More
7. There's no communication in view as to what happened. The errors are all at the top of the modal.

What I expected

An error to show that was in view (near the load more button)

What happened instead

[keoshi]

Hey @jeryj — it seems that this happened on WordPress.com, can you confirm?

[jeryj]

Hi @keoshi! This isn't on WordPress.com yet, but is a new feature in Jetpack. The current Media Library on WordPress.com uses the infinite scrolling pattern. You can access this Pexels library by choosing the Free Photo Library on WordPress.com, but it also uses the infinite scrolling pattern.

[keoshi]

@jeryj The reason I'm asking is because from the screenshots above it seems like this is happening in Calypso rather than on a self-hosted site, even if it's a Jetpack site. If that's the case, I wonder if https://github.com/Automattic/wp-calypso would be a better place to report this issue.

Some features are shared across the different code bases, so I'm unsure — cc'ing @jeherve because he'll know it. :)

[jeherve]

From the looks of it, this is the iFramed block editor, so that's about the Jetpack feature currently being worked on.

[obenland]

@jeryj For that state to occur, users would need to lose connection between the initial API request that populates the modal and the Load more click?

[jeryj]

Yeah, or just have a slow connection in general and it times out. Anything that could make the request not return correctly.

[obenland]

Just tested it with Chrome's "Slow 3G" and a custom 50kb/s setting and couldn't reproduce this occurring "naturally".

How do you feel about classifying this one as nice-to-have for when we ran out of more important External Media tasks?

[jeryj]

Sounds fine. Are there any other potential issues that could happen with the Load More button? If so, it'd be good to have an error state near the button. I can't think of any off the top of my head though.

[getdave]

@jancavan 👋 Are you able to take a look at this from a Design point of view? Once we have this then it will be suitable for inclusion in an estimation.

[jancavan]

@jeryj Out of curiosity, are there other types of error we display within this modal other than the internet connection error?

[jeryj]

I think so, such as if pexels doesn't initially load any results. But for those instances, there aren't photos so you're already at the top of the modal. I'm not sure of all the possible errors though. If I had to guess, most of them will happen when the modal is initially opened, rather than when clicking "load more"

[jancavan]

We could make the error message sticky so it's within view of the user:

I originally thought of disabling the "Load more" button, but let's give the user the opportunity to retry. Upon re-attempt, error message should disappear, but will return if connection has still not yet been reestablished.

A couple other minor comments:

• Update copy No internet connection. The current one (Your are probably offline.), feels as though we're unsure and a bit too cavalier.
• Error message dismiss icon is misaligned. Can we align it with the modal's dismiss icon?
• A divider between the "Load more" button and primary button would be nice to create separation between the scrolling area and the other elements around it that stay in place.

@jeryj @getdave @obenland

[eeeeevon13]

Plus 1 for the sticky error message. That would be my suggestion!

[obenland]

Let's close this for now, it doesn't look like it's caused any issues so far.