Add placeholders for sticker images (and fancy transitions).

src/components/views/messages/MImageBody.js

@@ -192,6 +192,12 @@ export default class extends React.Component {
                 });
             }).done();
         }
+        this._afterComponentDidMount();
+    }
+
+    // To be overridden by subclasses (e.g. MStickerBody) for further
+    // initialisation after componentDidMount
+    _afterComponentDidMount() {
     }
 
     componentWillUnmount() {

src/components/views/messages/MStickerBody.js

@@ -16,8 +16,9 @@ limitations under the License.
 
 'use strict';
 
-import MImageBody from "./MImageBody";
+import MImageBody from './MImageBody';
 import sdk from '../../../index';
+import TintableSVG from '../elements/TintableSvg';
 
 export default class MStickerBody extends MImageBody {
     displayName: 'MStickerBody'
@@ -27,6 +28,7 @@ export default class MStickerBody extends MImageBody {
 
       this._onMouseEnter = this._onMouseEnter.bind(this);
       this._onMouseLeave = this._onMouseLeave.bind(this);
+      this._onImageLoad = this._onImageLoad.bind(this);
     }
 
     _onMouseEnter() {
@@ -37,6 +39,36 @@ export default class MStickerBody extends MImageBody {
         this.setState({showTooltip: false});
     }
 
+    _onImageLoad() {
+        this.setState({
+            placeholderClasses: 'mx_MStickerBody_placeholder_invisible',
+        });
+        setTimeout(() => {
+            this.setState({
+                placeholderVisible: false,
+                thumbnailClasses: 'mx_MStickerBody_thumbnail_visible',
+            });
+        }, 500);
+    }
+
+    _afterComponentDidMount() {
+        if (this.refs.image.complete) {
+            // Image already loaded
+            this.setState({
+                placeholderVisible: false,
+                placeholderClasses: '.mx_MStickerBody_placeholder_invisible',
+                thumbnailClasses: 'mx_MStickerBody_thumbnail_visible',
+            });
+        } else {
+            // Image not already loaded
+            this.setState({
+                placeholderVisible: true,
+                placeholderClasses: '',
+                thumbnailClasses: '',
+            });
+        }
+    }
+
     _messageContent(contentUrl, thumbUrl, content) {
         let tooltip;
         const tooltipBody = (
@@ -45,18 +77,53 @@ export default class MStickerBody extends MImageBody {
             this.props.mxEvent.getContent().body) ?
             this.props.mxEvent.getContent().body : null;
         if (this.state.showTooltip && tooltipBody) {
-            const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
+            const RoomTooltip = sdk.getComponent('rooms.RoomTooltip');
             tooltip = <RoomTooltip
-                className="mx_RoleButton_tooltip"
+                className='mx_RoleButton_tooltip'
                 label={tooltipBody} />;
         }
 
+        const gutterSize = 0;
+        let placeholderSize = 75;
+        let placeholderFixupHeight = '100px';
+        let placeholderTop = 0;
+        let placeholderLeft = 0;
+
+        if (content.info) {
+            placeholderTop = Math.floor((content.info.h/2) - (placeholderSize/2)) + 'px';
+            placeholderLeft = Math.floor((content.info.w/2) - (placeholderSize/2) + gutterSize) + 'px';
+            placeholderFixupHeight = content.info.h + 'px';
+        }
+
+        placeholderSize = placeholderSize + 'px';
+        console.warn('placeholder classes', this.state.placeholderClasses);
+
         return (
-            <span className="mx_MImageBody" ref="body">
-                <div className="mx_MImageBody_thumbnail_container">
-                    <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
+            <span className='mx_MStickerBody' ref='body'
+                style={{
+                    height: placeholderFixupHeight,
+                }}>
+                <div className={'mx_MStickerBody_thumbnail_container'}>
+
+                    <div
+                        className={'mx_MStickerBody_placeholder ' + this.state.placeholderClasses}
+                        style={{
+                            top: placeholderTop,
+                            left: placeholderLeft,
+                        }}
+                    >
+                        <TintableSVG
+                            src={'img/icons-show-stickers.svg'}
+                            width={placeholderSize}
+                            height={placeholderSize} />
+                    </div>
+                    <img
+                        className={'mx_MStickerBody_thumbnail ' + this.state.thumbnailClasses}
+                        src={thumbUrl}
+                        ref='image'
                         alt={content.body}
                         onLoad={this.props.onWidgetLoad}
+                        onLoad={this._onImageLoad}
                         onMouseEnter={this._onMouseEnter}
                         onMouseLeave={this._onMouseLeave}
                     />