From eb2dee45a0a086e4dc2180cdd85185bbaa5fec72 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Mon, 1 Apr 2019 18:41:19 +0300
Subject: [PATCH] loaders improvements

---
 src/routes/Addons/styles.less                |  3 ++-
 src/routes/Board/styles.less                 | 12 ++++++----
 src/routes/Detail/StreamsList/StreamsList.js |  5 ++--
 src/routes/Detail/StreamsList/styles.less    | 24 ++++++++------------
 4 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less
index 11d139dad..315baef0c 100644
--- a/src/routes/Addons/styles.less
+++ b/src/routes/Addons/styles.less
@@ -103,6 +103,7 @@
 
         .placeholder {
             display: flex;
+            flex-direction: row;
             position: relative;
             z-index: 0;
             width: var(--addon-width);
@@ -175,7 +176,7 @@
                 width: 500%;
                 margin-left: -250%;
                 animation: placeholderAnimation 1s linear infinite;
-                background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
+                background: linear-gradient(to right, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 58%);
             }
 
             @keyframes placeholderAnimation {
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index 92174354b..2b65afd6e 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -48,7 +48,9 @@
         .placeholder {
             flex: 1;
             margin: 1em;
+            padding: 0.4em;
             position: relative;
+            z-index: 0;
             overflow: hidden;
             background-color: var(--color-backgroundlighter);
 
@@ -78,10 +80,10 @@
                 right: 0;
                 bottom: 0;
                 left: 50%;
-                width: 600%;
-                margin-left: -300%;
-                animation: placeholderAnimation 0.8s linear infinite;
-                background: linear-gradient(to right, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 58%) 50% 50%;
+                width: 800%;
+                margin-left: -400%;
+                animation: placeholderAnimation 1s linear infinite;
+                background: linear-gradient(to right, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 56%);
             }
 
             @keyframes placeholderAnimation {
@@ -94,7 +96,7 @@
                 }
             }
 
-            &:nth-child(n+8) {
+            &:nth-child(n+7) {
                 display: none;
             }
         }
diff --git a/src/routes/Detail/StreamsList/StreamsList.js b/src/routes/Detail/StreamsList/StreamsList.js
index dee270eb7..a70faa00b 100644
--- a/src/routes/Detail/StreamsList/StreamsList.js
+++ b/src/routes/Detail/StreamsList/StreamsList.js
@@ -9,9 +9,8 @@ const renderStreamPlaceholders = () => {
     for (let placeholderNumber = 0; placeholderNumber < 20; placeholderNumber++) {
         streamPlaceholders.push(
             <div key={placeholderNumber} className={styles['placeholder']}>
-                <div className={styles['logo-placeholder']}></div>
-                <div className={styles['text-placeholder']}></div>
-                <div className={styles['button-placeholder']}></div>
+                <div className={styles['logo-placeholder']} />
+                <div className={styles['text-placeholder']} />
             </div>
         )
     }
diff --git a/src/routes/Detail/StreamsList/styles.less b/src/routes/Detail/StreamsList/styles.less
index 28bdde8f2..7f512dada 100644
--- a/src/routes/Detail/StreamsList/styles.less
+++ b/src/routes/Detail/StreamsList/styles.less
@@ -23,28 +23,22 @@
             margin-top: var(--spacing);
             width: var(--stream-width);
             display: flex;
+            flex-direction: row;
             position: relative;
+            z-index: 0;
             overflow: hidden;
             background-color: var(--color-backgroundlighter);
             
             .logo-placeholder {
-                flex: 1;
                 margin: var(--spacing) 0 var(--spacing) var(--spacing);
+                width: calc(.2 * var(--stream-width));
                 height: calc(.2 * var(--stream-width));
                 background-color: var(--color-secondarylighter20);
             }
 
             .text-placeholder {
-                flex: 3;
-                margin: var(--spacing) 0 var(--spacing) var(--spacing);
-                height: calc(.2 * var(--stream-width));
-                background-color: var(--color-secondarylighter20);
-            }
-
-            .button-placeholder {
-                margin: var(--spacing) var(--spacing) var(--spacing) 0;
-                height: calc(.2 * var(--stream-width));
-                width: calc(0.07 * var(--stream-width));
+                flex: 1;
+                margin: var(--spacing);
                 background-color: var(--color-secondarylighter20);
             }
 
@@ -55,10 +49,10 @@
                 right: 0;
                 bottom: 0;
                 left: 50%;
-                width: 600%;
-                margin-left: -300%;
-                animation: placeholderAnimation 0.8s linear infinite;
-                background: linear-gradient(to right, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 58%) 50% 50%;
+                width: 800%;
+                margin-left: -400%;
+                animation: placeholderAnimation 1s linear infinite;
+                background: linear-gradient(to right, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 56%);
             }
 
             @keyframes placeholderAnimation {