UX: Changed post stream placeholder to animation (#7434)

app/assets/javascripts/discourse/templates/components/user-card-contents.hbs

@@ -3,21 +3,21 @@
     {{#if loading}}
       <div class="card-row first-row">
         <div class="user-card-avatar">
-          <div class="card-avatar-placeholder animated-placeholder"></div>
+          <div class="card-avatar-placeholder animated-placeholder placeholder-animation"></div>
         </div>
       </div>
 
       <div class="card-row second-row">
-        <div class="animated-placeholder"></div>
+        <div class="animated-placeholder placeholder-animation"></div>
       </div>
       <div class="card-row third-row">
-        <div class="animated-placeholder"></div>
+        <div class="animated-placeholder placeholder-animation"></div>
       </div>
       <div class="card-row fourth-row">
-        <div class="animated-placeholder"></div>
+        <div class="animated-placeholder placeholder-animation"></div>
       </div>
       <div class="card-row sixth-row">
-        <div class="animated-placeholder"></div>
+        <div class="animated-placeholder placeholder-animation"></div>
       </div>
     {{else}}
       <div class="card-row first-row">

app/assets/javascripts/discourse/widgets/post-placeholder.js.es6

@@ -6,12 +6,12 @@ export default createWidget("post-placeholder", {
   template: hbs`
     <div class='row'>
       <div class='topic-avatar'>
-        <div class='placeholder-avatar'></div>
+        <div class='placeholder-avatar placeholder-animation'></div>
       </div>
       <div class='topic-body'>
-        <div class='placeholder-text'></div>
+        <div class='placeholder-text placeholder-animation'></div>
-        <div class='placeholder-text'></div>
+        <div class='placeholder-text placeholder-animation'></div>
-        <div class='placeholder-text'></div>
+        <div class='placeholder-text placeholder-animation'></div>
       </div>
     </div>
   `

app/assets/stylesheets/common/base/discourse.scss

@@ -33,6 +33,31 @@
   }
 }
 
+// placeholder
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1100px 0;
+  }
+}
+
+.placeholder-animation {
+  animation-duration: 4s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeHolderShimmer;
+  animation-timing-function: linear;
+  background: $primary-very-low;
+  background: linear-gradient(
+    to right,
+    $primary-very-low 10%,
+    $primary-low 18%,
+    $primary-very-low 33%
+  );
+}
+
 // Base Elements
 html {
   height: 100%;

app/assets/stylesheets/common/base/topic-post.scss

@@ -1,15 +1,30 @@
 .placeholder-avatar {
   display: inline-block;
-  background-color: $primary-low;
   width: 45px;
   height: 45px;
   border-radius: 50%;
+  position: relative;
+  overflow: hidden;
+  &:before {
+    animation: placeHolderShimmer 4s linear infinite forwards;
+    position: absolute;
+    left: 0;
+    content: "";
+    background: linear-gradient(
+      to right,
+      $primary-very-low 10%,
+      $primary-low 28%,
+      $primary-very-low 43%
+    );
+    height: 45px;
+    width: 700px;
+  }
 }
 
 .placeholder-text {
+  margin-left: 11px;
   display: inline-block;
-  background-color: $primary-low;
+  width: calc(100% - 11px);
-  width: 100%;
   height: 1.5em;
   margin-bottom: 0.6em;
 }

app/assets/stylesheets/common/components/user-card.scss

@@ -2,42 +2,31 @@ $card_width: 580px;
 $avatar_width: 120px;
 $avatar_margin: -50px; // negative margin makes avatars extend above cards
 
-// placeholder
-@keyframes placeHolderShimmer {
-  0% {
-    background-position: -468px 0;
-  }
-  100% {
-    background-position: 468px 0;
-  }
-}
 .animated-placeholder {
-  animation-duration: 1.25s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name: placeHolderShimmer;
-  animation-timing-function: linear;
-  background: $primary-low;
-  background: linear-gradient(
-    to right,
-    $primary-low 10%,
-    $primary-low-mid 18%,
-    $primary-low 33%
-  );
   height: 20px;
   position: relative;
 }
+
 .card-avatar-placeholder {
   width: $avatar_width;
   height: $avatar_width;
   border-radius: 100%;
-  animation-duration: 5s;
+  position: relative;
-  background: linear-gradient(
+  overflow: hidden;
-    to right,
+  &:before {
-    $primary-low 10%,
+    animation: placeHolderShimmer 4s linear infinite forwards;
-    $primary-low-mid 38%,
+    position: absolute;
-    $primary-low 73%
+    left: 0;
-  );
+    content: "";
+    background: linear-gradient(
+      to right,
+      $primary-very-low 10%,
+      $primary-low 18%,
+      $primary-very-low 33%
+    );
+    height: $avatar_width;
+    width: $card_width;
+  }
 }
 
 // shared styles for user and group cards