Show a placeholder for broken or missing images in the shop - #8888
Merged
Conversation
Add an ImageWithFallback component that displays a 'Missing Content' placeholder (with a broken-image icon) when an image fails to load or has no source, keeping the same layout to avoid layout shift. Use it in the shop tiles and the media gallery in place of CorsAwareImage.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Wrap the CorsAwareImage component in an ImageWithFallback component that displays a "Missing Content" placeholder whenever the image has no source or fails to load. The placeholder should preserve the original image dimensions to prevent layout shifts.
This is mostly noticeable in development and staging, but since a broken pack can also make it to production, this provides a cleaner fallback, reduces the perception that the UI is broken, and makes missing assets much less jarring.
In staging / This PR
