Fix anchor scrolling by making sure all data is loaded before render

Author: HuggableSquare

app/routes/application.js

@@ -6,6 +6,7 @@ import getCompactVersion from 'ember-api-docs/utils/get-compact-version';
 
 export default Route.extend({
   headData: service(),
+  legacyModuleMappings: service(),
 
   title(tokens) {
     let [version, entity] = tokens;
@@ -20,8 +21,9 @@ export default Route.extend({
     }
     return '';
   },
-  afterModel() {
+  async afterModel() {
     set(this, 'headData.cdnDomain', ENV.API_HOST);
+    await this.get('legacyModuleMappings').initMappings();
     return this._super(...arguments);
   }
 

app/services/legacy-module-mappings.js

@@ -1,5 +1,4 @@
 import fetch from 'fetch';
-import { task } from 'ember-concurrency';
 import config from 'ember-api-docs/config/environment';
 import Service from '@ember/service';
 
@@ -11,20 +10,16 @@ const LOCALNAME_CONVERSIONS = {
 
 export default Service.extend({
 
-  init() {
-    this.get('initMappings').perform();
-  },
-
-  initMappings: task(function * () {
+  async initMappings() {
     try {
-      let response = yield this.fetch();
-      let mappings = yield response.json();
+      let response = await this.fetch();
+      let mappings = await response.json();
       let newMappings = this.buildMappings(mappings);
       this.set('mappings', newMappings);
     } catch (e) {
       this.set('mappings', []);
     }
-  }),
+  },
 
   buildMappings(mappings) {
     return mappings.map(item => {
@@ -41,7 +36,7 @@ export default Service.extend({
   },
 
   getModule(name, documentedModule) {
-    if (!this.get('initMappings.isIdle')) {
+    if (!this.mappings) {
       return '';
     }
     let matches = this.mappings.filter(element => element.localName === name);
@@ -88,15 +83,15 @@ export default Service.extend({
 
 
   hasFunctionMapping(name, module) {
-    if (!this.get('initMappings.isIdle')) {
+    if (!this.mappings) {
       return false;
     }
     let filtered = this.mappings.filter(element => element.export === name && element.module === module);
     return filtered.length > 0;
   },
 
   hasClassMapping(name) {
-    if (!this.get('initMappings.isIdle')) {
+    if (!this.mappings) {
       return false;
     }
     return this.mappings.filter(element => element.localName === name).length > 0;

app/templates/components/class-field-description.hbs

@@ -32,10 +32,8 @@
       </a>
     {{/if}}
   </p>
-  {{#if legacyModuleMappings.initMappings.isIdle}}
-    {{#if (and (eq field.static 1) (eq field.itemtype "method") hasImportExample)}}
-      {{import-example item=(concat "{ " field.name " }") package=field.class}}
-    {{/if}}
+  {{#if (and (eq field.static 1) (eq field.itemtype "method") hasImportExample)}}
+    {{import-example item=(concat "{ " field.name " }") package=field.class}}
   {{/if}}
   <dl class="parameters">
     {{#each field.params as |param|}}

app/templates/project-version/classes/class.hbs

@@ -36,10 +36,8 @@
       </div>
     {{/if}}
   </div>
-  {{#if (and (not (eq static 1)) legacyModuleMappings.initMappings.isIdle)}}
-    {{#if hasImportExample}}
-      {{import-example item=model.name package=module}}
-    {{/if}}
+  {{#if (and (not (eq static 1)) hasImportExample)}}
+    {{import-example item=model.name package=module}}
   {{/if}}
   <p class="description">{{html-safe model.description}}</p>