Auto merge of #2457 - Turbo87:index-loading, r=locks

index: Replace loading spinner with list item placeholders

#1937 changed the data loading code of the `index` route to load the summary data in the `model()` hook again. That is fine when using fastboot, but without fastboot it is currently resulting in an ugly loading spinner page before the real page content gets rendered.

This PR replaces the loading page with rendering the real page directly and showing placeholders until the real data is available.

The new approach is still compatible with fastboot due to the use of `deferReadiness()`.

![loading](https://user-images.githubusercontent.com/141300/80317190-98050780-8802-11ea-8596-8d9f9ee05545.gif)

r? @locks

Author: bors

app/components/category-list.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>

app/components/crate-list-name-only.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>

app/components/crate-list-newest.hbs

@@ -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);
+}

app/components/front-page-list.hbs

@@ -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]));
+  }
+}