Ivan - Add loading component [skip ci]

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

@@ -4,6 +4,7 @@ import i18n from 'lib-app/i18n';
 
 import Header from 'core-components/header';
 import Listing from 'core-components/listing';
+import Loading from 'core-components/loading';
 
 class AdminPanelCustomResponses extends React.Component {
 
@@ -13,6 +14,7 @@ class AdminPanelCustomResponses extends React.Component {
                 <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">

client/src/core-components/button.scss

@@ -30,7 +30,8 @@
         background-color: $secondary-blue;
     }
 
-    &_disabled {
+    &_disabled,
+    &_disabled:hover {
         background-color: #ec9696;
     }
 

client/src/core-components/loading.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+
+class Loading extends React.Component {
+    
+    render() {
+        return (
+            <div className={this.getClass()}>
+                <span className="loading-icon" />
+            </div>
+        );
+    }
+
+    getClass() {
+        let classes = {
+            'loading': true
+        };
+
+        classes[this.props.className] = (this.props.className);
+
+        return classNames(classes);
+    }
+}
+
+export default Loading;

client/src/core-components/loading.scss

@@ -0,0 +1,55 @@
+$color: white;
+
+.loading {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    &-icon {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+        font-size: 4px;
+        border-top: 1.1em solid rgba($color, 0.2);
+        border-right: 1.1em solid rgba($color, 0.2);
+        border-bottom: 1.1em solid rgba($color, 0.2);
+        border-left: 1.1em solid $color;
+        -webkit-transform: translateZ(0);
+        -ms-transform: translateZ(0);
+        transform: translateZ(0);
+        -webkit-animation: turnAnimation 1.1s infinite linear;
+        animation: turnAnimation 1.1s infinite linear;
+
+        &,
+        &:after {
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+        }
+    }
+
+    @-webkit-keyframes turnAnimation {
+        0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+        }
+        100% {
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+        }
+    }
+    @keyframes turnAnimation {
+        0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+        }
+        100% {
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+        }
+    }
+}

client/src/core-components/submit-button.js

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 
 // CORE LIBS
 import Button from 'core-components/button';
+import Loading from 'core-components/loading';
 
 class SubmitButton extends React.Component {
 
@@ -30,7 +31,7 @@ class SubmitButton extends React.Component {
 
     renderLoading() {
         return (
-            <div className="submit-button__loader"></div>
+            <Loading className="submit-button__loader" />
         );
     }
 

client/src/core-components/submit-button.scss

@@ -1,46 +1,3 @@
 .submit-button {
     position: relative;
-
-    &__loader {
-        position: absolute;
-        top: 7px;
-        left: 103px;
-
-        font-size: 4px;
-        border-top: 1.1em solid rgba(255, 255, 255, 0.2);
-        border-right: 1.1em solid rgba(255, 255, 255, 0.2);
-        border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
-        border-left: 1.1em solid #ffffff;
-        -webkit-transform: translateZ(0);
-        -ms-transform: translateZ(0);
-        transform: translateZ(0);
-        -webkit-animation: turnAnimation 1.1s infinite linear;
-        animation: turnAnimation 1.1s infinite linear;
-    }
-    &__loader,
-    &__loader:after {
-        border-radius: 50%;
-        width: 30px;
-        height: 30px;
-    }
-    @-webkit-keyframes turnAnimation {
-        0% {
-            -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-        }
-        100% {
-            -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-        }
-    }
-    @keyframes turnAnimation {
-        0% {
-            -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-        }
-        100% {
-            -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-        }
-    }
 }