fix/2175: shows loading text while image loads (WIP)

server/src/pages/shot/view.js

@@ -11,10 +11,20 @@ const reactruntime = require("../../reactruntime");
 class Clip extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      loading: true,
+      imageDisplay: "none"
+    };
   }
 
   componentDidMount() {
     let image = ReactDOM.findDOMNode(this.refs.clipImage);
+    if (image.complete) {
+      this.setState({ 
+        loading: false,
+        imageDisplay: "inline"
+      });
+    }
     let onResize = () => {
       let windowHeight = window.innerHeight;
       let paddingTop = Math.floor((windowHeight - image.height - 35) / 2);
@@ -35,17 +45,30 @@ class Clip extends React.Component {
       console.warn("Somehow there's a shot without an image");
       return null;
     }
-    let node = <img style={{height: "auto", width: clip.image.dimensions.x + "px", maxWidth: "100%"}} ref="clipImage" src={ clip.image.url } alt={ clip.image.text } />;
+    let node = <img style={{height: "auto", width: clip.image.dimensions.x + "px", maxWidth: "100%", display: this.state.imageDisplay}} ref="clipImage" src={ clip.image.url } alt={ clip.image.text } />;
     return <div ref="clipContainer" className="clip-container">
       <menu type="context" id="clip-image-context">
         <menuitem label="Copy Image Text" onClick={this.copyImageText.bind(this)} ></menuitem>
       </menu>
       <a href={ clip.image.url } onClick={ this.onClickClip.bind(this) } contextMenu="clip-image-context">
+        { this.renderSpinner() } 
         { node }
       </a>
     </div>;
   }
 
+  renderSpinner() {
+  if (!this.state.loading) {
+    return null;
+  }
+  return (
+    <div>
+    Loading...
+    <span className="spinner" />
+    </div>
+  );
+  }
+
   onClickClip() {
     sendEvent("goto-clip", "content", {useBeacon: true});
     // Allow default action to continue