From 13b9ca34323327b82181a88c8c01a0d522fb23c8 Mon Sep 17 00:00:00 2001
From: "damian.przygodzki" <damian.przygodzki@jazzy.pro>
Date: Mon, 26 Jun 2017 14:08:34 +0200
Subject: [PATCH] #935 Loader for image widget

---
 src/components/widget/Image.js | 47 +++++++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/components/widget/Image.js b/src/components/widget/Image.js
index 166448ada..a3ae6120a 100644
--- a/src/components/widget/Image.js
+++ b/src/components/widget/Image.js
@@ -1,5 +1,16 @@
 import React, { Component } from 'react';
 import { getImageAction, postImageAction } from '../../actions/AppActions';
+import Loader from '../app/Loader';
+
+const Placeholder = (props) => (
+    <div className="image-placeholder">
+        <div
+            className="placeholder-value"
+        >
+            {props.children}
+        </div>
+    </div>
+);
 
 class Image extends Component{
     constructor(props){
@@ -185,6 +196,26 @@ class Image extends Component{
                 Take from camera
             </div>
     }
+    
+    renderImagePreview() {
+        const {isLoading, imageSrc} = this.state;
+        const {fields} = this.props;
+        
+        if(isLoading)
+            return <Placeholder><Loader /></Placeholder>
+        else if(imageSrc)
+            return (
+                <div className="image-preview">
+                    <img
+                        src={imageSrc}
+                        alt="image"
+                        className="img-fluid"
+                    />
+                </div>
+            );
+        else
+            return <Placeholder>{fields[0].emptyText}</Placeholder>
+    }
 
     render(){
         const { imageSrc, usingCamera } = this.state;
@@ -196,21 +227,7 @@ class Image extends Component{
                 onKeyDown={this.handleKeyDown}
                 tabIndex={0}
             >
-                {imageSrc ?
-                    <div className="image-preview">
-                        <img
-                            src={imageSrc}
-                            alt="image"
-                            className="img-fluid"
-                        />
-                    </div>
-                    :
-                    <div className="image-placeholder">
-                        <div
-                            className="placeholder-value"
-                        >{fields[0].emptyText}</div>
-                    </div>
-                }
+                {this.renderImagePreview()}
 
                 {usingCamera && this.renderVideoPreview()}