diff --git a/app/components/gh-loading-spinner.hbs b/app/components/gh-loading-spinner.hbs
index ebb55a296..69165d7c6 100644
--- a/app/components/gh-loading-spinner.hbs
+++ b/app/components/gh-loading-spinner.hbs
@@ -1,5 +1,5 @@
 {{#if this.showSpinner}}
-    <div class="gh-loading-content">
+    <div class="gh-loading-content" ...attributes>
         <div class="gh-loading-spinner"></div>
     </div>
 {{/if}}
\ No newline at end of file
diff --git a/app/components/gh-loading-spinner.js b/app/components/gh-loading-spinner.js
index 02704e109..79f7308b4 100644
--- a/app/components/gh-loading-spinner.js
+++ b/app/components/gh-loading-spinner.js
@@ -1,21 +1,23 @@
-import Component from '@ember/component';
-import {task, timeout} from 'ember-concurrency';
+import Component from '@glimmer/component';
+import {task} from 'ember-concurrency-decorators';
+import {timeout} from 'ember-concurrency';
+import {tracked} from '@glimmer/tracking';
 
-export default Component.extend({
-    tagName: '',
+export default class GhLoadingSpinnerComponent extends Component {
+    @tracked showSpinner = false;
 
-    showSpinner: false,
     // ms until the loader is displayed,
     // prevents unnecessary flash of spinner
-    slowLoadTimeout: 200,
+    slowLoadTimeout = 200;
 
-    didInsertElement() {
-        this._super(...arguments);
+    constructor() {
+        super(...arguments);
         this.startSpinnerTimeout.perform();
-    },
+    }
 
-    startSpinnerTimeout: task(function* () {
+    @task
+    *startSpinnerTimeout() {
         yield timeout(this.slowLoadTimeout);
-        this.set('showSpinner', true);
-    })
-});
+        this.showSpinner = true;
+    }
+}