crate.version: Add animated placeholders for the README loading state

Author: Turbo87

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;

app/components/placeholder.module.css

@@ -1,12 +1,9 @@
 .placeholder {
-    --placeholder-bg: hsla(59, 19%, 50%, 1.0);
-    --placeholder-bg2: hsla(59, 19%, 50%, 0.7);
-
     position: relative;
     display: block;
     overflow: hidden;
-    background: linear-gradient(to right, var(--placeholder-bg) 8%, var(--placeholder-bg2) 18%, var(--placeholder-bg) 33%);
-    background-size: 800px 104px;
+    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;

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">