diff --git a/addon/styles/addon.less b/addon/styles/addon.less
index 704c04238..616730ec1 100644
--- a/addon/styles/addon.less
+++ b/addon/styles/addon.less
@@ -723,6 +723,14 @@
   }
 }
 
+.row-loading-indicator {
+  display: inline-block;
+  position: relative;
+  width: 10px;
+  height: 10px;
+  margin-left: 5px;
+}
+
 //
 // Financial theme is included by default.
 //
diff --git a/addon/views/row-loading-indicator.js b/addon/views/row-loading-indicator.js
new file mode 100644
index 000000000..f51810d10
--- /dev/null
+++ b/addon/views/row-loading-indicator.js
@@ -0,0 +1,17 @@
+import Ember from 'ember';
+
+export default Ember.View.extend({
+  templateName: 'row-loading-indicator',
+
+  classNameBindings: ['indicatorClass'],
+
+  isLoading: false,
+
+  indicatorClass: Ember.computed(function() {
+    var classNames = ['row-loading-indicator'];
+    if (this.get('isLoading')) {
+      classNames.push('loading');
+    }
+    return classNames.join(' ');
+  }).property('isLoading')
+});
diff --git a/app/templates/grouping-column-cell.hbs b/app/templates/grouping-column-cell.hbs
index 62997cd40..6357495a4 100644
--- a/app/templates/grouping-column-cell.hbs
+++ b/app/templates/grouping-column-cell.hbs
@@ -1,12 +1,14 @@
 {{#if view.isLoading}}
-	<img class="loading-indicator" src="/ember-table/images/loading.gif" width="75px" height="15px">
+    {{view "row-loading-indicator"
+    isLoading=view.isLoading
+    }}
 {{else}}
-	{{view view.indicatorView
-		hasChildren=view.hasChildren
-		isExpanded=view.isExpanded
-		expandLevel=view.expandLevel
-	}}
-	<span class="ember-table-content">
-	  {{view.cellContent}}
-	</span>
+  {{view view.indicatorView
+  hasChildren=view.hasChildren
+  isExpanded=view.isExpanded
+  expandLevel=view.expandLevel
+  }}
+  <span class="ember-table-content">
+    {{view.cellContent}}
+  </span>
 {{/if}}
diff --git a/app/templates/row-loading-indicator.hbs b/app/templates/row-loading-indicator.hbs
new file mode 100644
index 000000000..2aa261a98
--- /dev/null
+++ b/app/templates/row-loading-indicator.hbs
@@ -0,0 +1 @@
+<img class="loading-indicator" src="/ember-table/images/loading.gif" width="75px" height="15px">
diff --git a/app/views/row-loading-indicator.js b/app/views/row-loading-indicator.js
new file mode 100644
index 000000000..199831f2d
--- /dev/null
+++ b/app/views/row-loading-indicator.js
@@ -0,0 +1,3 @@
+import RowLoadingIndicator from 'ember-table/views/row-loading-indicator';
+
+export default RowLoadingIndicator;
diff --git a/tests/helpers/module-for-ember-table.js b/tests/helpers/module-for-ember-table.js
index 430deed80..156d43569 100644
--- a/tests/helpers/module-for-ember-table.js
+++ b/tests/helpers/module-for-ember-table.js
@@ -7,6 +7,7 @@ export default function moduleForEmberTable(description, subject) {
     needs: [
       'view:body-table-container',
       'view:column-sortable-indicator',
+      'view:row-loading-indicator',
       'view:footer-table-container',
       'view:header-cell',
       'view:header-row',
@@ -33,6 +34,7 @@ export default function moduleForEmberTable(description, subject) {
       'template:table-cell',
       'template:table-row',
       'template:grouping-column-cell',
+      'template:row-loading-indicator',
       'template:grouped-row-indicator'
     ],
     subject: subject
diff --git a/tests/unit/components/loading-indicator-test.js b/tests/unit/components/loading-indicator-test.js
index 86360a8a6..72ec6982c 100644
--- a/tests/unit/components/loading-indicator-test.js
+++ b/tests/unit/components/loading-indicator-test.js
@@ -30,12 +30,11 @@ test('render loading indicator', function(assert) {
   var component = this.subject([{id: 1, isLoading: true}]);
   this.render();
   var helper = EmberTableHelper.create({ _assert: assert, _component: component});
-
   var loadingRow = helper.bodyRows().eq(0);
+
   assert.equal(loadingRow.find('.loading-indicator').length, 3, 'should render loading indicator');
 });
 
-
 test('expand grouped rows', function(assert) {
   var component = this.subject([firstRowObject]);
   this.render();
@@ -55,5 +54,5 @@ test('expand grouped rows', function(assert) {
 
 	secondRow = helper.bodyRows().eq(1);
 	var firstChildrenId = secondRow.find('.ember-table-content:eq(0)').text().trim();
-	assert.equal(firstChildrenId, '11', 'it should render chidlren');
+	assert.equal(firstChildrenId, '11', 'it should render children');
 });