From 342d9a242cf0827450b90be6aedeff0bb463b5a3 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 12 Oct 2021 16:01:38 +0100
Subject: [PATCH] Converted `<GhLoadingSpinner>` to glimmer component

no issue

- allows for attributes such as class/style to be set on it's container for better display in varying situations
---
 .../app/components/gh-loading-spinner.hbs     |  2 +-
 .../app/components/gh-loading-spinner.js      | 28 ++++++++++---------
 2 files changed, 16 insertions(+), 14 deletions(-)

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}}
-    <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/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;
+    }
+}