diff --git a/app/components/loading-spinner.hbs b/app/components/loading-spinner.hbs
new file mode 100644
index 000000000..f1b4445ec
--- /dev/null
+++ b/app/components/loading-spinner.hbs
@@ -0,0 +1,9 @@
+<div class='loading-spinner'>
+  <div class='sk-folding-cube'>
+    <div class='sk-cube1 sk-cube'></div>
+    <div class='sk-cube2 sk-cube'></div>
+    <div class='sk-cube4 sk-cube'></div>
+    <div class='sk-cube3 sk-cube'></div>
+  </div>
+  {{yield}}
+</div>
\ No newline at end of file
diff --git a/app/components/loading-spinner.js b/app/components/loading-spinner.js
deleted file mode 100644
index 45bf59629..000000000
--- a/app/components/loading-spinner.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { classNames } from '@ember-decorators/component';
-import Component from '@ember/component';
-
-@classNames('loading-spinner')
-export default class LoadingSpinner extends Component {}
diff --git a/app/templates/components/loading-spinner.hbs b/app/templates/components/loading-spinner.hbs
deleted file mode 100644
index 8f8a69686..000000000
--- a/app/templates/components/loading-spinner.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="sk-folding-cube">
-  <div class="sk-cube1 sk-cube"></div>
-  <div class="sk-cube2 sk-cube"></div>
-  <div class="sk-cube4 sk-cube"></div>
-  <div class="sk-cube3 sk-cube"></div>
-</div>
-{{yield}}
diff --git a/tests/integration/components/loading-spinner-test.js b/tests/integration/components/loading-spinner-test.js
index 06af114c9..00edc93b1 100644
--- a/tests/integration/components/loading-spinner-test.js
+++ b/tests/integration/components/loading-spinner-test.js
@@ -10,15 +10,15 @@ module('Integration | Component | loading spinner', function (hooks) {
     // Set any properties with this.set('myProperty', 'value');
     // Handle any actions with this.on('myAction', function(val) { ... });
 
-    await render(hbs`{{loading-spinner}}`);
+    await render(hbs`<LoadingSpinner/>`);
 
     assert.dom('*').hasText('');
 
     // Template block usage:
     await render(hbs`
-      {{#loading-spinner}}
+      <LoadingSpinner>
         template block text
-      {{/loading-spinner}}
+      </LoadingSpinner>
     `);
 
     assert.dom('*').hasText('template block text');