index: Move data loading back into the controller

This partially reverts commit a34f6c4.

The goal of this commit is to display loading spinners for the sections that are still loading, but display the rest of the content of the frontpage already, while the summary data is still loading.

Author: Turbo87

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

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

app/styles/index.module.css

@@ -93,6 +93,7 @@
         display: inline-block;
         height: 16px;
         width: 16px;
+        margin-left: 10px;
     }
 }