about summary refs log tree commit diff
path: root/app/assets/javascripts
diff options
context:
space:
mode:
authorEugen Rochko <eugen@zeonfederated.com>2017-01-25 17:23:17 +0100
committerEugen Rochko <eugen@zeonfederated.com>2017-01-25 17:23:17 +0100
commit97da56d02bbe9c0f3aca8f46fcb7bf8635a9e784 (patch)
treec1e831a9a8e5a005084a9dca72e5c2ad83243260 /app/assets/javascripts
parent00fa850bdc8e98dfb3e3772ec2b9a55e8538cadc (diff)
Fix loading of avatars before drawing them to canvas
Diffstat (limited to 'app/assets/javascripts')
-rw-r--r--app/assets/javascripts/components/components/avatar.jsx4
1 files changed, 2 insertions, 2 deletions
diff --git a/app/assets/javascripts/components/components/avatar.jsx b/app/assets/javascripts/components/components/avatar.jsx
index 30467da4d..b8420014b 100644
--- a/app/assets/javascripts/components/components/avatar.jsx
+++ b/app/assets/javascripts/components/components/avatar.jsx
@@ -24,7 +24,7 @@ const Avatar = React.createClass({
     this.setState({ hovering: false });
   },
 
-  componentDidMount () {
+  handleLoad () {
     this.canvas.getContext('2d').drawImage(this.image, 0, 0, this.props.size, this.props.size);
   },
 
@@ -41,7 +41,7 @@ const Avatar = React.createClass({
 
     return (
       <div onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={{ ...this.props.style, width: `${this.props.size}px`, height: `${this.props.size}px`, position: 'relative' }}>
-        <img ref={this.setImageRef} src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ position: 'absolute', top: '0', left: '0', display: hovering ? 'block' : 'none', borderRadius: '4px' }} />
+        <img ref={this.setImageRef} onLoad={this.handleLoad} src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ position: 'absolute', top: '0', left: '0', visibility: hovering ? 'visible' : 'hidden', borderRadius: '4px' }} />
         <canvas ref={this.setCanvasRef} width={this.props.size} height={this.props.size} style={{ borderRadius: '4px' }} />
       </div>
     );