From a10aebfdf54280b263c499f96272ce7a64b45e90 Mon Sep 17 00:00:00 2001
From: ivan <ivan@opensupports.com>
Date: Tue, 11 Oct 2016 17:42:10 -0300
Subject: [PATCH] Ivan - Implement loading on custom responses  [skip ci]

---
 .../tickets/admin-panel-custom-responses.js   | 29 ++++++++++++++-----
 .../tickets/admin-panel-custom-responses.scss |  5 ++++
 client/src/core-components/loading.js         | 15 ++++++++--
 client/src/core-components/loading.scss       | 20 ++++++++++++-
 4 files changed, 58 insertions(+), 11 deletions(-)
 create mode 100644 client/src/app/admin/panel/tickets/admin-panel-custom-responses.scss

diff --git a/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js b/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js
index 2394b37e..e47bdc78 100644
--- a/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js
+++ b/client/src/app/admin/panel/tickets/admin-panel-custom-responses.js
@@ -12,15 +12,28 @@ class AdminPanelCustomResponses extends React.Component {
         return (
             <div className="admin-panel-custom-responses">
                 <Header title={i18n('CUSTOM_RESPONSES')} description={i18n('CUSTOM_RESPONSES_DESCRIPTION')} />
-                <div className="row">
-                    <div className="col-md-3">
-                        <Loading />
-                        <Listing {...this.getListingProps()}/>
-                    </div>
-                    <div className="col-md-9">
-                        Custom response form
-                    </div>
+                {(this.props.loaded) ? this.renderContent() : this.renderLoading()}
+            </div>
+        );
+    }
+
+    renderContent() {
+        return (
+            <div className="row">
+                <div className="col-md-3">
+                    <Listing {...this.getListingProps()}/>
                 </div>
+                <div className="col-md-9">
+                    Custom response form
+                </div>
+            </div>
+        );
+    }
+
+    renderLoading() {
+        return (
+            <div className="admin-panel-custom-responses__loading">
+                <Loading backgrounded size="large"/>
             </div>
         );
     }
diff --git a/client/src/app/admin/panel/tickets/admin-panel-custom-responses.scss b/client/src/app/admin/panel/tickets/admin-panel-custom-responses.scss
new file mode 100644
index 00000000..d82bbc65
--- /dev/null
+++ b/client/src/app/admin/panel/tickets/admin-panel-custom-responses.scss
@@ -0,0 +1,5 @@
+.admin-panel-custom-responses {
+    &__loading {
+        height: 300px;
+    }
+}
\ No newline at end of file
diff --git a/client/src/core-components/loading.js b/client/src/core-components/loading.js
index da79fb77..a9660614 100644
--- a/client/src/core-components/loading.js
+++ b/client/src/core-components/loading.js
@@ -2,18 +2,29 @@ import React from 'react';
 import classNames from 'classnames';
 
 class Loading extends React.Component {
+    static propTypes = {
+        backgrounded: React.PropTypes.bool,
+        size: React.PropTypes.oneOf(['small', 'medium', 'large'])
+    };
+
+    static defaultProps = {
+        size: 'small',
+        backgrounded: false
+    };
     
     render() {
         return (
             <div className={this.getClass()}>
-                <span className="loading-icon" />
+                <span className="loading__icon" />
             </div>
         );
     }
 
     getClass() {
         let classes = {
-            'loading': true
+            'loading': true,
+            'loading_backgrounded': (this.props.backgrounded),
+            'loading_large': (this.props.size === 'large')
         };
 
         classes[this.props.className] = (this.props.className);
diff --git a/client/src/core-components/loading.scss b/client/src/core-components/loading.scss
index 6273b184..ad48b7c6 100644
--- a/client/src/core-components/loading.scss
+++ b/client/src/core-components/loading.scss
@@ -6,7 +6,7 @@ $color: white;
     height: 100%;
     position: relative;
 
-    &-icon {
+    &__icon {
         position: absolute;
         top: 0;
         bottom: 0;
@@ -32,6 +32,24 @@ $color: white;
         }
     }
 
+    &_large {
+
+        .loading__icon,
+        .loading__icon:after {
+            font-size: 7px;
+            width: 60px;
+            height: 60px;
+        }
+    }
+
+    &_backgrounded {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+        background-color: rgba(black, 0.2);
+    }
+
     @-webkit-keyframes turnAnimation {
         0% {
             -webkit-transform: rotate(0deg);