Auto merge of #3398 - Turbo87:readme-placeholder, r=pichfl

Show placeholders instead of loading spinner for the README

This PR also extracts a `Placeholder` component, to make this kind of thing more reuseable :)

### Example

https://user-images.githubusercontent.com/141300/110982133-6fc5bf00-8368-11eb-9d31-acc653870fb2.mov

Author: bors

app/components/front-page-list/item/placeholder.hbs

@@ -1,7 +1,7 @@
 <div local-class="link" ...attributes>
   <div local-class="left">
-    <div local-class="title"></div>
-    {{#if @withSubtitle}}<div local-class="subtitle"></div>{{/if}}
+    <Placeholder local-class="title" />
+    {{#if @withSubtitle}}<Placeholder local-class="subtitle" />{{/if}}
   </div>
   {{svg-jar "chevron-right" local-class="right"}}
 </div>

app/components/front-page-list/item/placeholder.module.css

@@ -1,5 +1,7 @@
 .link {
     --shadow: 0 2px 3px hsla(51, 50%, 44%, .35);
+    --placeholder-bg: hsla(59, 19%, 50%, 1.0);
+    --placeholder-bg2: hsla(59, 19%, 50%, 0.7);
 
     display: flex;
     align-items: center;
@@ -23,15 +25,15 @@
     height: 16px;
     width: 150px;
     border-radius: 8px;
-    background: hsla(59deg, 19%, 50%, 0.25);
+    opacity: 0.25;
 }
 
 .subtitle {
     height: 13px;
     width: 90px;
     margin-top: 4px;
     border-radius: 6.5px;
-    background: hsla(59deg, 19%, 50%, 0.2);
+    opacity: 0.2;
 }
 
 .right {

app/components/placeholder.hbs

@@ -0,0 +1 @@
+<div local-class="placeholder" ...attributes></div>

app/components/placeholder.module.css

@@ -0,0 +1,22 @@
+.placeholder {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    background: linear-gradient(to right, var(--placeholder-bg) 8%, var(--placeholder-bg2) 16%, var(--placeholder-bg) 29%);
+    background-size: 1200px 100%;
+    animation-name: backgroundAnimation;
+    animation-duration: 1.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+}
+
+@keyframes backgroundAnimation {
+    0% {
+        background-position: -500px;
+    }
+
+    100% {
+        background-position: 500px;
+    }
+}

app/styles/application.module.css

@@ -21,6 +21,9 @@
     --link-color: rgb(0, 172, 91);
     --link-hover-color: #007940;
     --separator-color: #284725;
+
+    --placeholder-bg: hsl(212, 7%, 57%);
+    --placeholder-bg2: hsl(213, 16%, 75%);
 }
 
 :global(.new-design) {

app/styles/crate/version.module.css

@@ -34,7 +34,6 @@
     }
 }
 
-.readme-spinner,
 .no-readme {
     padding: 40px 15px;
     text-align: center;
@@ -47,8 +46,28 @@
     }
 }
 
-.readme-spinner > div {
-    --spinner-size: 35px;
+.placeholder-title {
+    width: 30%;
+    height: 25px;
+    margin: 15px 0 25px;
+    border-radius: 5px;
+    opacity: 0.6;
+}
+
+.placeholder-subtitle {
+    width: 50%;
+    height: 20px;
+    margin: 35px 0 25px;
+    border-radius: 5px;
+    opacity: 0.6;
+}
+
+.placeholder-text {
+    width: 100%;
+    height: 16px;
+    margin-top: 15px;
+    border-radius: 5px;
+    opacity: 0.3;
 }
 
 .sidebar {

app/templates/crate/version.hbs

@@ -22,7 +22,16 @@
     <div local-class="docs">
       {{#if this.loadReadmeTask.isRunning}}
         <div local-class="readme-spinner">
-          <LoadingSpinner/>
+          <Placeholder local-class="placeholder-title" />
+          <Placeholder local-class="placeholder-text" />
+          <Placeholder local-class="placeholder-text" />
+          <Placeholder local-class="placeholder-text" />
+          <Placeholder local-class="placeholder-text" />
+          <Placeholder local-class="placeholder-text" />
+          <Placeholder local-class="placeholder-subtitle" />
+          <Placeholder local-class="placeholder-text" />
+          <Placeholder local-class="placeholder-text" />
+          <Placeholder local-class="placeholder-text" />
         </div>
       {{else if this.readme}}
         <article aria-label="Readme">