From 5665a0ef370f63654f2305e43f57d962db3cf9d2 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 2 Dec 2016 11:11:35 +0000
Subject: [PATCH] Fix scroll jump on image decryption

`onWidgetLoad` is now being called when an image has been decrypted so that the ScrollPanel maintains its scroll position (whether it's stuckAtBottom or not). This attempts to fix https://github.com/vector-im/riot-web/issues/2624
---
 src/components/views/messages/MImageBody.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 63fd119335..08969114f9 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -32,6 +32,9 @@ module.exports = React.createClass({
     propTypes: {
         /* the MatrixEvent to show */
         mxEvent: React.PropTypes.object.isRequired,
+
+        /* called when the image has loaded */
+        onWidgetLoad: React.PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
@@ -123,6 +126,7 @@ module.exports = React.createClass({
                         decryptedUrl: contentUrl,
                         decryptedThumbnailUrl: thumbnailUrl,
                     });
+                    this.props.onWidgetLoad();
                 });
             }).catch((err) => {
                 console.warn("Unable to decrypt attachment: ", err);
@@ -186,11 +190,12 @@ module.exports = React.createClass({
                 <span className="mx_MImageBody" ref="body">
                     <div className="mx_MImageBody_thumbnail" ref="image" style={{
                         "display": "flex",
-                        "align-items": "center",
-                        "justify-items": "center",
+                        "alignItems": "center",
                         "width": "100%",
                     }}>
-                        <img src="img/spinner.gif" alt={content.body} width="16" height="16"/>
+                        <img src="img/spinner.gif" alt={content.body} width="32" height="32" style={{
+                            "margin": "auto",
+                        }}/>
                     </div>
                 </span>
             );