diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js
index 9cd71b7c9..55e0e77d6 100644
--- a/app/javascript/mastodon/components/media_gallery.js
+++ b/app/javascript/mastodon/components/media_gallery.js
@@ -315,15 +315,22 @@ class MediaGallery extends React.PureComponent {
style.height = height;
}
- const size = media.take(4).size;
+ const size = media.take(4).size;
+ const uncached = media.every(attachment => attachment.get('type') === 'unknown');
if (this.isStandaloneEligible()) {
children = ;
} else {
- children = media.take(4).map((attachment, i) => );
+ children = media.take(4).map((attachment, i) => );
}
- if (visible) {
+ if (uncached) {
+ spoilerButton = (
+
+ );
+ } else if (visible) {
spoilerButton = ;
} else {
spoilerButton = (
@@ -335,7 +342,7 @@ class MediaGallery extends React.PureComponent {
return (
-
+
{spoilerButton}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index d7e90fcaf..0b569bb8f 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3477,6 +3477,14 @@ a.status-card.compact:hover {
background: rgba($base-overlay-background, 0.8);
}
}
+
+ &:disabled {
+ cursor: not-allowed;
+
+ .spoiler-button__overlay__label {
+ background: rgba($base-overlay-background, 0.5);
+ }
+ }
}
}