Fix up some depercations, styling, and docs

tests/acceptance/load-all-test.js

@@ -32,6 +32,9 @@ module('Acceptance | load all', function(hooks) {
   });
 
   test('visiting /load-all', async function(assert) {
+    // need our data fetching to be slow for these tests.
+    server.timing = 1000;
+
     server.create('post', { id: '1', title: 'Post 1 title' });
     server.create('post');
 

tests/dummy/app/app.js

@@ -4,6 +4,7 @@ import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
 import DS from 'ember-data';
 import LoadableModel from 'ember-data-storefront/mixins/loadable-model';
+import { registerWarnHandler } from '@ember/debug';
 
 DS.Model.reopen(LoadableModel);
 
@@ -13,6 +14,15 @@ const App = Application.extend({
   Resolver
 });
 
+// We'll ignore the empty tag name warning for test selectors since we have
+// empty tag names for pass through components.
+registerWarnHandler(function(message, { id }, next) {
+  if (id !== 'ember-test-selectors.empty-tag-name') {
+    next(...arguments);
+  }
+});
+
 loadInitializers(App, config.modulePrefix);
 
+
 export default App;

tests/dummy/app/pods/application/template.hbs

@@ -1,4 +1,4 @@
-<div class='font-sans text-black leading-normal'>
+<div class='docs-font-sans docs-text-black docs-leading-normal'>
   {{docs-header logo='ember-data' name='Storefront'}}
 
   {{outlet}}

tests/dummy/app/pods/docs/guides/working-with-relationships/demo-1/component.js

@@ -2,6 +2,7 @@ import Component from '@ember/component';
 import { task } from 'ember-concurrency';
 import { inject as service } from '@ember/service';
 import { readOnly } from '@ember/object/computed';
+import { defineProperty } from '@ember/object';
 
 export default Component.extend({
 
@@ -31,7 +32,8 @@ export default Component.extend({
 
     this.get('store').resetCache();
     // We do this to reset loadComments state
-    this.set('loadComments', tasks.loadComments);
+    defineProperty(this, 'loadComments', tasks.loadComments);
+    this.notifyPropertyChange('loadComments');
   },
 
   actions: {

tests/dummy/app/pods/docs/guides/working-with-relationships/demo-2/component.js

@@ -2,6 +2,7 @@ import Component from '@ember/component';
 import { task } from 'ember-concurrency';
 import { inject as service } from '@ember/service';
 import { readOnly } from '@ember/object/computed';
+import { defineProperty } from '@ember/object';
 
 export default Component.extend({
 
@@ -31,7 +32,8 @@ export default Component.extend({
 
     this.get('store').resetCache();
     // We do this to reset loadComments state
-    this.set('reloadWithComments', tasks.reloadWithComments);
+    defineProperty(this, 'reloadWithComments', tasks.reloadWithComments);
+    this.notifyPropertyChange('reloadWithComments');
   },
 
   actions: {

tests/dummy/app/pods/docs/guides/working-with-relationships/template.md

@@ -2,9 +2,9 @@
 
 Here are some patterns we recommend to make working with relationships more predictable.
 
-## Explicitly load related data
+## Explicitly loading related data
 
-The `LoadableModel` mixin gives you a simple, expressive way to load related data from your models:
+Storefront provides an expressive way to load related data from your models. To get started, you'll first need to add the `LoadableModel` mixin your models.
 
 ```js
 // models/post.js
@@ -16,16 +16,26 @@ export default DS.Model.extend(LoadableModel, {
 });
 ```
 
-Now you have an explicit, expressive API for asynchronously loading related data.
+### Load related data
+
+Your models now have a `load` method that loads a relationship by name. Take a look at the following demo:
 
 {{docs/guides/working-with-relationships/demo-1}}
 
-## Explicitly reload with related data
+When called the first time, the `load` method will return a blocking promise that fulfills once the related data has been loaded into Ember Data's store.
+
+However, subsequent calls to `load` will instantly fulfill while a background reload refreshes the related data. Storefront tries to be as smart as possible and not return a blocking promises if it knows that it has already loaded the related data.
+
+This allows you to declare the data that you need data loaded for a specific component, while not having to worry about overcalling `load`.
 
-The `LoadableModel` mixin also gives you a way to side load related data by reloading your existing loaded models.
+### Reload with related data
+
+Your models also have a way to side load related data by reloading themselves with a compound document.
 
 {{docs/guides/working-with-relationships/demo-2}}
 
+Similar to `load`, the first call to `reloadWith` will return a blocking promise. Subsequent calls will instantly fulfill while the model and relationship are reloaded in the background.
+
 ## Avoiding async relationships
 
 **Why avoid async relationships?**

tests/dummy/mirage/config.js

@@ -17,9 +17,7 @@ export default function() {
     timing: 1000
   });
 
-  this.get('/posts/:id', {
-    timing: 1000
-  });
+  this.get('/posts/:id');
 
   this.get('/posts/:id/relationships/:relationship', genericRelationshipRouteHandler);
 

tests/integration/mixins/loadable-model-test.js

@@ -171,6 +171,10 @@ module('Integration | Mixins | LoadableModel', function(hooks) {
 
     assert.equal(serverCalls, 1);
 
+    // kind of britle, but we want to slow the server down a little
+    // so we can be sure our test is blocked by the next call to load.
+    server.timing = 500;
+
     await run(() => {
       return post.reloadWith('comments');
     });