Ivan - Implement loading on custom responses [skip ci]

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>
         );
     }

client/src/app/admin/panel/tickets/admin-panel-custom-responses.scss

@@ -0,0 +1,5 @@
+.admin-panel-custom-responses {
+    &__loading {
+        height: 300px;
+    }
+}

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);

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);