diff --git a/app/javascript/mastodon/features/ui/components/image_loader.js b/app/javascript/mastodon/features/ui/components/image_loader.js
index 52c3a898b75..5ea55d1d26f 100644
--- a/app/javascript/mastodon/features/ui/components/image_loader.js
+++ b/app/javascript/mastodon/features/ui/components/image_loader.js
@@ -8,12 +8,14 @@ export default class ImageLoader extends React.PureComponent {
alt: PropTypes.string,
src: PropTypes.string.isRequired,
previewSrc: PropTypes.string.isRequired,
- width: PropTypes.number.isRequired,
- height: PropTypes.number.isRequired,
+ width: PropTypes.number,
+ height: PropTypes.number,
}
static defaultProps = {
alt: '',
+ width: null,
+ height: null,
};
state = {
@@ -46,8 +48,8 @@ export default class ImageLoader extends React.PureComponent {
this.setState({ loading: true, error: false });
Promise.all([
this.loadPreviewCanvas(props),
- this.loadOriginalImage(props),
- ])
+ this.hasSize() && this.loadOriginalImage(props),
+ ].filter(Boolean))
.then(() => {
this.setState({ loading: false, error: false });
this.clearPreviewCanvas();
@@ -106,6 +108,11 @@ export default class ImageLoader extends React.PureComponent {
this.removers = [];
}
+ hasSize () {
+ const { width, height } = this.props;
+ return typeof width === 'number' && typeof height === 'number';
+ }
+
setCanvasRef = c => {
this.canvas = c;
}
@@ -116,6 +123,7 @@ export default class ImageLoader extends React.PureComponent {
const className = classNames('image-loader', {
'image-loader--loading': loading,
+ 'image-loader--amorphous': !this.hasSize(),
});
return (
diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js
index 8bb81ca01d1..a5b9dc19f30 100644
--- a/app/javascript/mastodon/features/ui/components/media_modal.js
+++ b/app/javascript/mastodon/features/ui/components/media_modal.js
@@ -74,7 +74,10 @@ export default class MediaModal extends ImmutablePureComponent {
}
if (attachment.get('type') === 'image') {
- content = ;
+ const width = attachment.getIn(['meta', 'original', 'width']) || null;
+ const height = attachment.getIn(['meta', 'original', 'height']) || null;
+
+ content = ;
} else if (attachment.get('type') === 'gifv') {
content = ;
}
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 9b500c7ad99..66d2715da07 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1117,6 +1117,20 @@
height: 100%;
background-image: none;
}
+
+ &.image-loader--amorphous {
+ position: static;
+
+ .image-loader__preview-canvas {
+ display: none;
+ }
+
+ .image-loader__img {
+ position: static;
+ width: auto;
+ height: auto;
+ }
+ }
}
.navigation-bar {