From e4f8c09c32d9a03567de9a1e9a1954928915e29b Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Tue, 22 May 2018 10:43:16 +0100
Subject: [PATCH] Only include placeholder in DOM when necessary

---
 src/components/views/messages/MImageBody.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index f27124238e..e2316b2fcc 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -276,15 +276,16 @@ export default class extends React.Component {
                 { /* Calculate aspect ratio, using %padding will size _container correctly */ }
                 <div style={{ paddingBottom: (100 * content.info.h / content.info.w) + '%' }}></div>
 
-                <div className="mx_MImageBody_thumbnail" style={{
-                    "display": showPlaceholder ? undefined : 'none',
-                    // Constrain width here so that spinner appears central to the loaded thumbnail
-                    "max-width": content.info.w + "px",
-                }}>
-                    <div className="mx_MImageBody_thumbnail_spinner">
-                        { placeholder }
+                { showPlaceholder &&
+                    <div className="mx_MImageBody_thumbnail" style={{
+                        // Constrain width here so that spinner appears central to the loaded thumbnail
+                        "max-width": content.info.w + "px",
+                    }}>
+                        <div className="mx_MImageBody_thumbnail_spinner">
+                            { placeholder }
+                        </div>
                     </div>
-                </div>
+                }
 
                 <div style={{display: !showPlaceholder ? undefined : 'none'}}>
                     { img }