diff --git a/app/components/front-page-list/item/placeholder.hbs b/app/components/front-page-list/item/placeholder.hbs
index 67282422b8..3a7d3cba6a 100644
--- a/app/components/front-page-list/item/placeholder.hbs
+++ b/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>
\ No newline at end of file
diff --git a/app/components/front-page-list/item/placeholder.module.css b/app/components/front-page-list/item/placeholder.module.css
index 2ac4c691f2..99d15167cc 100644
--- a/app/components/front-page-list/item/placeholder.module.css
+++ b/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,7 +25,7 @@
     height: 16px;
     width: 150px;
     border-radius: 8px;
-    background: hsla(59deg, 19%, 50%, 0.25);
+    opacity: 0.25;
 }
 
 .subtitle {
@@ -31,7 +33,7 @@
     width: 90px;
     margin-top: 4px;
     border-radius: 6.5px;
-    background: hsla(59deg, 19%, 50%, 0.2);
+    opacity: 0.2;
 }
 
 .right {
diff --git a/app/components/placeholder.hbs b/app/components/placeholder.hbs
new file mode 100644
index 0000000000..1c922fb2f2
--- /dev/null
+++ b/app/components/placeholder.hbs
@@ -0,0 +1 @@
+<div local-class="placeholder" ...attributes></div>
\ No newline at end of file
diff --git a/app/components/placeholder.module.css b/app/components/placeholder.module.css
new file mode 100644
index 0000000000..428ca55280
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/app/styles/application.module.css b/app/styles/application.module.css
index e9d3ad96f9..7749c1fa02 100644
--- a/app/styles/application.module.css
+++ b/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) {
diff --git a/app/styles/crate/version.module.css b/app/styles/crate/version.module.css
index 570badf970..89c83b3279 100644
--- a/app/styles/crate/version.module.css
+++ b/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 {
diff --git a/app/templates/crate/version.hbs b/app/templates/crate/version.hbs
index b1e6967d09..9c2f56c664 100644
--- a/app/templates/crate/version.hbs
+++ b/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">