diff --git a/app/components/category-list.hbs b/app/components/category-list.hbs
deleted file mode 100644
index ff338e747f5..00000000000
--- a/app/components/category-list.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-<FrontPageList as |Item|>
-  {{#each @categories as |category|}}
-    <Item
-      @route="category"
-      @model={{category.slug}}
-      @title={{category.category}}
-      @subtitle="{{format-num category.crates_cnt}} crates"
-    />
-  {{/each}}
-</FrontPageList>
\ No newline at end of file
diff --git a/app/components/crate-list-name-only.hbs b/app/components/crate-list-name-only.hbs
deleted file mode 100644
index cf16b012c1a..00000000000
--- a/app/components/crate-list-name-only.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-<FrontPageList @ordered={{true}} as |Item|>
-  {{#each @crates as |crate index|}}
-    <Item
-      @route="crate"
-      @model={{crate.id}}
-      @title={{crate.name}}
-      data-test-crate-link={{index}}
-    />
-  {{/each}}
-</FrontPageList>
\ No newline at end of file
diff --git a/app/components/crate-list-newest.hbs b/app/components/crate-list-newest.hbs
deleted file mode 100644
index d449880b2d8..00000000000
--- a/app/components/crate-list-newest.hbs
+++ /dev/null
@@ -1,11 +0,0 @@
-<FrontPageList @ordered={{true}} as |Item|>
-  {{#each @crates as |crate index|}}
-    <Item
-      @route="crate"
-      @model={{crate.id}}
-      @title={{crate.name}}
-      @subtitle="v{{crate.newest_version}}"
-      data-test-crate-link={{index}}
-    />
-  {{/each}}
-</FrontPageList>
\ No newline at end of file
diff --git a/app/components/front-page-list.hbs b/app/components/front-page-list.hbs
deleted file mode 100644
index 34685dc9832..00000000000
--- a/app/components/front-page-list.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-{{#if @ordered}}
-  <ol local-class="list">{{yield (component "front-page-list/item")}}</ol>
-{{else}}
-  <ul local-class="list">{{yield (component "front-page-list/item")}}</ul>
-{{/if}}
diff --git a/app/components/front-page-list.module.css b/app/components/front-page-list.module.css
deleted file mode 100644
index d594abb0773..00000000000
--- a/app/components/front-page-list.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.list {
-    list-style: none;
-    padding: 0;
-}
-
diff --git a/app/components/front-page-list/item.hbs b/app/components/front-page-list/item.hbs
index 75aed5ba476..9742d95f843 100644
--- a/app/components/front-page-list/item.hbs
+++ b/app/components/front-page-list/item.hbs
@@ -1,9 +1,7 @@
-<li>
-  <LinkTo @route={{@route}} @model={{@model}} local-class="link" ...attributes>
-    <div local-class="left">
-      <div local-class="title">{{@title}}</div>
-      {{#if @subtitle}}<div local-class="subtitle">{{@subtitle}}</div>{{/if}}
-    </div>
-    {{svg-jar "chevron-right" local-class="right"}}
-  </LinkTo>
-</li>
+<LinkTo @route={{@route}} @model={{@model}} local-class="link" ...attributes>
+  <div local-class="left">
+    <div local-class="title">{{@title}}</div>
+    {{#if @subtitle}}<div local-class="subtitle">{{@subtitle}}</div>{{/if}}
+  </div>
+  {{svg-jar "chevron-right" local-class="right"}}
+</LinkTo>
\ No newline at end of file
diff --git a/app/components/front-page-list/item/placeholder.hbs b/app/components/front-page-list/item/placeholder.hbs
new file mode 100644
index 00000000000..67282422b8a
--- /dev/null
+++ b/app/components/front-page-list/item/placeholder.hbs
@@ -0,0 +1,7 @@
+<div local-class="link" ...attributes>
+  <div local-class="left">
+    <div local-class="title"></div>
+    {{#if @withSubtitle}}<div local-class="subtitle"></div>{{/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
new file mode 100644
index 00000000000..b15bb7c54b7
--- /dev/null
+++ b/app/components/front-page-list/item/placeholder.module.css
@@ -0,0 +1,39 @@
+.link {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 60px;
+    margin: 8px 0;
+    padding: 0 10px;
+    background-color: var(--main-bg-dark);
+}
+
+.left {
+    flex-grow: 1;
+    width: 0;
+}
+
+.title {
+    height: 16px;
+    width: 150px;
+    border-radius: 8px;
+    background: rgb(118, 131, 138);
+    opacity: 0.25;
+}
+
+.subtitle {
+    height: 13px;
+    width: 90px;
+    margin-top: 4px;
+    border-radius: 6.5px;
+    background: rgb(118, 131, 138);
+    opacity: 0.2;
+}
+
+.right {
+    flex-shrink: 0;
+    height: 16px;
+    width: auto;
+    margin-left: 10px;
+    color: rgb(118, 131, 138);
+}
diff --git a/app/components/keyword-list.hbs b/app/components/keyword-list.hbs
deleted file mode 100644
index e70e061cbd2..00000000000
--- a/app/components/keyword-list.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-<FrontPageList as |Item|>
-  {{#each @keywords as |keyword|}}
-    <Item
-      @route="keyword"
-      @model={{keyword}}
-      @title={{keyword.id}}
-      @subtitle="{{format-num keyword.crates_cnt}} crates"
-    />
-  {{/each}}
-</FrontPageList>
\ No newline at end of file
diff --git a/app/controllers/index.js b/app/controllers/index.js
index 6b5263cde0c..010da8db696 100644
--- a/app/controllers/index.js
+++ b/app/controllers/index.js
@@ -1,5 +1,33 @@
 import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+import { readOnly } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
+
+import { task } from 'ember-concurrency';
 
 export default Controller.extend({
-  hasData: true,
+  fetcher: service(),
+
+  model: readOnly('dataTask.lastSuccessful.value'),
+
+  hasData: computed('dataTask.{lastSuccessful,isRunning}', function () {
+    return this.get('dataTask.lastSuccessful') || !this.get('dataTask.isRunning');
+  }),
+
+  dataTask: task(function* () {
+    let data = yield this.fetcher.ajax('/api/v1/summary');
+
+    addCrates(this.store, data.new_crates);
+    addCrates(this.store, data.most_downloaded);
+    addCrates(this.store, data.just_updated);
+    addCrates(this.store, data.most_recently_downloaded);
+
+    return data;
+  }).drop(),
 });
+
+function addCrates(store, crates) {
+  for (let i = 0; i < crates.length; i++) {
+    crates[i] = store.push(store.normalize('crate', crates[i]));
+  }
+}
diff --git a/app/helpers/placeholders.js b/app/helpers/placeholders.js
new file mode 100644
index 00000000000..0fecb6d32e6
--- /dev/null
+++ b/app/helpers/placeholders.js
@@ -0,0 +1,3 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(([count]) => new Array(count));
diff --git a/app/routes/index.js b/app/routes/index.js
index 226dd33e6f2..b6acba49184 100644
--- a/app/routes/index.js
+++ b/app/routes/index.js
@@ -2,7 +2,7 @@ import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
 
 export default Route.extend({
-  fetcher: service(),
+  fastboot: service(),
 
   headTags() {
     return [
@@ -16,26 +16,12 @@ export default Route.extend({
     ];
   },
 
-  setupController(controller, model) {
-    this._super(controller, model);
+  setupController(controller) {
     this.controllerFor('application').set('searchQuery', null);
-  },
-
-  model() {
-    return this.fetcher.ajax('/api/v1/summary');
-  },
 
-  // eslint-disable-next-line no-unused-vars
-  afterModel(model, transition) {
-    addCrates(this.store, model.new_crates);
-    addCrates(this.store, model.most_downloaded);
-    addCrates(this.store, model.just_updated);
-    addCrates(this.store, model.most_recently_downloaded);
+    let promise = controller.dataTask.perform();
+    if (this.fastboot.isFastBoot) {
+      this.fastboot.deferRendering(promise);
+    }
   },
 });
-
-function addCrates(store, crates) {
-  for (let i = 0; i < crates.length; i++) {
-    crates[i] = store.push(store.normalize('crate', crates[i]));
-  }
-}
diff --git a/app/styles/index.module.css b/app/styles/index.module.css
index 5818c8972dd..ae47ce051bb 100644
--- a/app/styles/index.module.css
+++ b/app/styles/index.module.css
@@ -86,13 +86,9 @@
         font-size: 105%;
         line-height: 20px;
     }
-
-    > section[aria-busy="true"] > h2::after {
-        content: '';
-        background-image: url('/assets/ajax-loader.gif');
-        display: inline-block;
-        height: 16px;
-        width: 16px;
-    }
 }
 
+.list {
+    list-style: none;
+    padding: 0;
+}
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index 569aa424e09..5f2782195ef 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -36,28 +36,149 @@
 </div>
 
 <div local-class='lists'>
-  <section data-test-new-crates aria-busy="{{this.dataTask.isRunning}}">
+  <section data-test-new-crates>
     <h2>New Crates</h2>
-    <CrateListNewest @crates={{this.model.new_crates}} />
+    <ol local-class="list" aria-busy="{{this.dataTask.isRunning}}">
+      {{#if this.dataTask.isRunning}}
+        {{#each (placeholders 10)}}
+          <li>
+            <FrontPageList::Item::Placeholder @withSubtitle={{true}} />
+          </li>
+        {{/each}}
+      {{else}}
+        {{#each this.model.new_crates as |crate index|}}
+          <li>
+            <FrontPageList::Item
+              @route="crate"
+              @model={{crate.id}}
+              @title={{crate.name}}
+              @subtitle="v{{crate.newest_version}}"
+              data-test-crate-link={{index}}
+            />
+          </li>
+        {{/each}}
+      {{/if}}
+    </ol>
   </section>
-  <section data-test-most-downloaded aria-busy="{{this.dataTask.isRunning}}">
+
+  <section data-test-most-downloaded>
     <h2>Most Downloaded</h2>
-    <CrateListNameOnly @crates={{this.model.most_downloaded}} />
+    <ol local-class="list" aria-busy="{{this.dataTask.isRunning}}">
+      {{#if this.dataTask.isRunning}}
+        {{#each (placeholders 10)}}
+          <li>
+            <FrontPageList::Item::Placeholder />
+          </li>
+        {{/each}}
+      {{else}}
+        {{#each this.model.most_downloaded as |crate index|}}
+          <li>
+            <FrontPageList::Item
+              @route="crate"
+              @model={{crate.id}}
+              @title={{crate.name}}
+              data-test-crate-link={{index}}
+            />
+          </li>
+        {{/each}}
+      {{/if}}
+    </ol>
   </section>
-  <section data-test-just-updated aria-busy="{{this.dataTask.isRunning}}">
+
+  <section data-test-just-updated>
     <h2>Just Updated</h2>
-    <CrateListNewest @crates={{this.model.just_updated}} />
+    <ol local-class="list" aria-busy="{{this.dataTask.isRunning}}">
+      {{#if this.dataTask.isRunning}}
+        {{#each (placeholders 10)}}
+          <li>
+            <FrontPageList::Item::Placeholder @withSubtitle={{true}} />
+          </li>
+        {{/each}}
+      {{else}}
+        {{#each this.model.just_updated as |crate index|}}
+          <li>
+            <FrontPageList::Item
+              @route="crate"
+              @model={{crate.id}}
+              @title={{crate.name}}
+              @subtitle="v{{crate.newest_version}}"
+              data-test-crate-link={{index}}
+            />
+          </li>
+        {{/each}}
+      {{/if}}
+    </ol>
   </section>
-  <section data-test-most-recently-downloaded aria-busy="{{this.dataTask.isRunning}}">
+
+  <section data-test-most-recently-downloaded>
     <h2>Most Recent Downloads</h2>
-    <CrateListNameOnly @crates={{this.model.most_recently_downloaded}} />
+    <ol local-class="list" aria-busy="{{this.dataTask.isRunning}}">
+      {{#if this.dataTask.isRunning}}
+        {{#each (placeholders 10)}}
+          <li>
+            <FrontPageList::Item::Placeholder />
+          </li>
+        {{/each}}
+      {{else}}
+        {{#each this.model.most_recently_downloaded as |crate index|}}
+          <li>
+            <FrontPageList::Item
+              @route="crate"
+              @model={{crate.id}}
+              @title={{crate.name}}
+              data-test-crate-link={{index}}
+            />
+          </li>
+        {{/each}}
+      {{/if}}
+    </ol>
   </section>
-  <section data-test-keywords aria-busy="{{this.dataTask.isRunning}}">
+
+  <section data-test-keywords>
     <h2>Popular Keywords <LinkTo @route="keywords">(see all)</LinkTo></h2>
-    <KeywordList @keywords={{this.model.popular_keywords}} />
+    <ul local-class="list" aria-busy="{{this.dataTask.isRunning}}">
+      {{#if this.dataTask.isRunning}}
+        {{#each (placeholders 10)}}
+          <li>
+            <FrontPageList::Item::Placeholder @withSubtitle={{true}} />
+          </li>
+        {{/each}}
+      {{else}}
+        {{#each this.model.popular_keywords as |keyword|}}
+          <li>
+            <FrontPageList::Item
+              @route="keyword"
+              @model={{keyword}}
+              @title={{keyword.id}}
+              @subtitle="{{format-num keyword.crates_cnt}} crates"
+            />
+          </li>
+        {{/each}}
+      {{/if}}
+    </ul>
   </section>
-  <section data-test-categories aria-busy="{{this.dataTask.isRunning}}">
+
+  <section data-test-categories>
     <h2>Popular Categories <LinkTo @route="categories">(see all)</LinkTo></h2>
-    <CategoryList @categories={{this.model.popular_categories}} />
+    <ul local-class="list" aria-busy="{{this.dataTask.isRunning}}">
+      {{#if this.dataTask.isRunning}}
+        {{#each (placeholders 10)}}
+          <li>
+            <FrontPageList::Item::Placeholder @withSubtitle={{true}} />
+          </li>
+        {{/each}}
+      {{else}}
+        {{#each this.model.popular_categories as |category|}}
+          <li>
+            <FrontPageList::Item
+              @route="category"
+              @model={{category.slug}}
+              @title={{category.category}}
+              @subtitle="{{format-num category.crates_cnt}} crates"
+            />
+          </li>
+        {{/each}}
+      {{/if}}
+    </ul>
   </section>
 </div>