Render placeholder instead of image when MediaGallery container width isn't known

1 files changed, 6 insertions, 5 deletions

diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js
index d637d7c8e..10afeb2eb 100644
--- a/app/javascript/flavours/glitch/components/media_gallery.js
+++ b/app/javascript/flavours/glitch/components/media_gallery.js
@@ -237,7 +237,7 @@ export default class MediaGallery extends React.PureComponent {
   }
 
   componentDidUpdate (prevProps) {
-    if (this.node && this.node.offsetWidth) {
+    if (this.node && this.node.offsetWidth && this.node.offsetWidth != this.state.width) {
       this.setState({
         width: this.node.offsetWidth,
       });
@@ -254,8 +254,7 @@ export default class MediaGallery extends React.PureComponent {
 
   handleRef = (node) => {
     this.node = node;
-    if (node /*&& this.isStandaloneEligible()*/) {
-      // offsetWidth triggers a layout, so only calculate when we need to
+    if (node && node.offsetWidth && node.offsetWidth != this.state.width) {
       this.setState({
         width: node.offsetWidth,
       });
@@ -276,10 +275,14 @@ export default class MediaGallery extends React.PureComponent {
 
     const style = {};
 
+    const computedClass = classNames('media-gallery', { 'full-width': fullwidth });
+
     if (this.isStandaloneEligible() && width) {
       style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
     } else if (width) {
       style.height = width / (16/9);
+    } else {
+      return (<div className={computedClass} ref={this.handleRef}></div>);
     }
 
     if (!visible) {
@@ -299,8 +302,6 @@ export default class MediaGallery extends React.PureComponent {
       }
     }
 
-    const computedClass = classNames('media-gallery', { 'full-width': fullwidth });
-
     return (
       <div className={computedClass} style={style} ref={this.handleRef}>
         {visible ? (