Block: Pattern Thumbnail: Fix loading and error state #655
Conversation
ryelle
added
the
[Component] Theme
ryelle
changed the title
|
Is this the error state?
If yes, then I wonder, what might cause that error state to happen? Is this if the thumbnail doesn't load properly? I forgot what error state we use for the Showcase thumbnails, but we should probably use the same here, and omit the duplicated link-text. If the error state for the Showcase is not appropriate, we should use a broken image icon, something like:
SVG: Shown at 24x24px. |
Yes - though it's pretty rare since we retry fetching the image 10 times.
I'm pretty sure the error state for Showcase is just the site title text (so like this, but without the icon). Since all the sites got custom screenshots (which would never show this), we never got back to requesting design for an error state. I'll update the image, and see what i can do about the text— we need some text there for accessibility (since it's a link), but perhaps I can hide it better. |
|
Updated the text & icon, it now looks like this if an image fails to load: 
|
|
Nice! |
|
I'm getting 403's from mShots making it hard to test but since they are from mShots it's probably a fair representation of this branch. The current sequence shows The code looks correct from a logic standpoint.
|
|
I think you're getting the broken image before the Interactivity API kicks in, so I've tweaked the CSS a bit to hide the image by default. So now you should see the empty grey box -> loader -> image. I'm going to merge this PR, we can iterate if there are edge cases once it's on production. |
|
I'm still getting this on production:
|
…r users, hide image on error This removes the flash of text before the loader kicks in. This text is only used to ensure the link has an accessible name while the image is loading or broken. Once loaded, the image's alt serves this function. If there is an error, the (broken) image should not be visible, and the span provides the accessible text. See #655 (comment)
Fixes #652 — This updates the pattern preview block to use context for the initial block state (ex,
attempts). Previously the state.attempts value was global, so each pattern on the page incremented it. By the time the last patterns on the page are rendered, theattemptsvalue would already be >10, so it would only try the initial fetch and if the mshots image did not exist, it would error - no retries.This updates the
attemptsto behave as expected, 10 attempts per pattern. This should cut down on the number of errors per page.The error display has also been updated, in the case where there are issues. Happy to tweak this if there are any suggestions @StevenDufresne @WordPress/meta-design (screenshot below)
Screenshots
How to test the changes in this Pull Request:
<img>tagTo check that this is loading correctly from scratch, you could update
$cache_keyto something random, which will force mshots to re-take the screenshots, and take longer for loading.To intentionally trigger an error state, update the
$cache_key(render.php) and changeMAX_ATTEMPTS(view.js) to 1 or 2.Remember to rebuild if you make those changes.