yield from the template

README.md

@@ -279,6 +279,18 @@ you can work on its appearance.
 
 By default, the `infinity-loader` will just output a `span` showing its status.
 
+* **Providing a block**
+
+```html
+{{#infinity-loader infinityModel=model}}
+<img src="loading-spinner.gif" />
+{{/infinity-loader}}
+```
+
+If you provide a block to the component, it will render the block instead of
+rendering `loadingText` or `loadedText`. This will allow you to provide your
+own custom markup or styling for the loading state.
+
 * **reached-infinity Class Name**
 
 ```scss

addon/components/infinity-loader.js

@@ -1,6 +1,7 @@
 import Ember from 'ember';
+import emberVersionIs from 'ember-version-is';
 
-export default Ember.Component.extend({
+const InfinityLoaderComponent = Ember.Component.extend({
   classNames: ["infinity-loader"],
   classNameBindings: ["infinityModel.reachedInfinity"],
   guid: null,
@@ -77,3 +78,11 @@ export default Ember.Component.extend({
     Ember.run.scheduleOnce('afterRender', this, this._checkIfInView);
   })
 });
+
+if (emberVersionIs('lessThan', '1.13.0')) {
+  InfinityLoaderComponent.reopen({
+    hasBlock: Ember.computed.alias('template')
+  });
+}
+
+export default InfinityLoaderComponent;

app/templates/components/infinity-loader.hbs

@@ -1,5 +1,9 @@
-{{#if infinityModel.reachedInfinity}}
-  <span>{{loadedText}}</span>
+{{#if hasBlock}}
+  {{yield}}
 {{else}}
-  <span>{{loadingText}}</span>
+  {{#if infinityModel.reachedInfinity}}
+    <span>{{loadedText}}</span>
+  {{else}}
+    <span>{{loadingText}}</span>
+  {{/if}}
 {{/if}}

blueprints/infinity-template/files/app/templates/components/infinity-loader.hbs

@@ -1,5 +1,9 @@
-{{#if infinityModel.reachedInfinity}}
-  <span>{{loadedText}}</span>
+{{#if hasBlock}}
+  {{yield}}
 {{else}}
-  <span>{{loadingText}}</span>
+  {{#if infinityModel.reachedInfinity}}
+    <span>{{loadedText}}</span>
+  {{else}}
+    <span>{{loadingText}}</span>
+  {{/if}}
 {{/if}}

package.json

@@ -25,6 +25,7 @@
     "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-dependency-checker": "^1.0.1",
     "ember-cli-github-pages": "0.0.6",
+    "ember-cli-htmlbars-inline-precompile": "0.2.0",
     "ember-cli-ic-ajax": "0.2.1",
     "ember-cli-inject-live-reload": "^1.3.1",
     "ember-cli-pretender": "0.3.2",

tests/integration/infinity-loader-test.js

@@ -0,0 +1,26 @@
+import hbs from 'htmlbars-inline-precompile';
+import { test, moduleForComponent } from 'ember-qunit';
+
+moduleForComponent('infinity-loader', {
+  integration: true
+});
+
+test('it renders loading text if no block given', function(assert) {
+  assert.expect(1);
+  this.on('infinityLoad', function () {});
+  this.render(hbs`
+              {{infinity-loader}}
+              `);
+  assert.equal(this.$('.infinity-loader > span').text(), "Loading Infinite Model...");
+});
+
+test('it yields to the block if given', function(assert) {
+  assert.expect(1);
+  this.on('infinityLoad', function () {});
+  this.render(hbs`
+              {{#infinity-loader}}
+                <span>My custom block</span>
+              {{/infinity-loader}}
+              `);
+  assert.equal(this.$('.infinity-loader > span').text(), "My custom block");
+});