diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 5eef236b26..64821434dd 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -35,3 +35,13 @@ limitations under the License.
     // Make sure the _thumbnail is positioned relative to the _container
     position: relative;
 }
+
+.mx_MImageBody_thumbnail_spinner {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.mx_MImageBody_thumbnail_spinner img {
+    margin: auto;
+}
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 656bd02840..d9108a2fe1 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -239,14 +239,8 @@ export default class extends React.Component {
         let img = null;
         // e2e image hasn't been decrypted yet
         if (content.file !== undefined && this.state.decryptedUrl === null) {
-            img = <div className="mx_MImageBody_thumbnail" ref="image" style={{
-                "display": "flex",
-                "alignItems": "center",
-                "width": "100%",
-            }}>
-                <img src="img/spinner.gif" alt={content.body} width="32" height="32" style={{
-                    "margin": "auto",
-                }} />
+            img = <div className="mx_MImageBody_thumbnail mx_MImageBody_thumbnail_spinner" ref="image">
+                <img src="img/spinner.gif" alt={content.body} width="32" height="32" />
             </div>;
         } else if (thumbUrl && !this.state.imgError) {
             // Restrict the width of the thumbnail here, otherwise it will fill the container