diff --git a/ghost/admin/app/components/gh-loading-spinner.hbs b/ghost/admin/app/components/gh-loading-spinner.hbs
index ebb55a296e..69165d7c67 100644
--- a/ghost/admin/app/components/gh-loading-spinner.hbs
+++ b/ghost/admin/app/components/gh-loading-spinner.hbs
@@ -1,5 +1,5 @@
{{#if this.showSpinner}}
-
+
{{/if}}
\ No newline at end of file
diff --git a/ghost/admin/app/components/gh-loading-spinner.js b/ghost/admin/app/components/gh-loading-spinner.js
index 02704e1098..79f7308b4a 100644
--- a/ghost/admin/app/components/gh-loading-spinner.js
+++ b/ghost/admin/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;
+ }
+}