From c53297f188fe26fffb68a3e9fceb2b66eb4703f5 Mon Sep 17 00:00:00 2001
From: niharikak101 <niharikak101@gmail.com>
Date: Tue, 4 Apr 2017 15:37:12 +0100
Subject: [PATCH] fix/2175: shows loading text while image loads (WIP)

---
 server/src/pages/shot/view.js | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/server/src/pages/shot/view.js b/server/src/pages/shot/view.js
index 3409524bd6..c7e149d8a9 100644
--- a/server/src/pages/shot/view.js
+++ b/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