Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Converted <GhLoadingSpinner> to glimmer component

Browse source 
no issue

- allows for attributes such as class/style to be set on it's container for better display in varying situations
This commit is contained in:
Kevin Ansfield 2021-10-12 16:01:38 +01:00
parent 5a048c105e
commit 342d9a242c
2 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/gh-loading-spinner.hbs
View file

@ -1,5 +1,5 @@
{{#if this.showSpinner}} {{#if this.showSpinner}}
<div class="gh-loading-content"> <div class="gh-loading-content" ...attributes>
<div class="gh-loading-spinner"></div> <div class="gh-loading-spinner"></div>
</div> </div>
{{/if}} {{/if}}

28
ghost/admin/app/components/gh-loading-spinner.js
View file

@ -1,21 +1,23 @@
import Component from '@ember/component'; import Component from '@glimmer/component';
import {task, timeout} from 'ember-concurrency'; import {task} from 'ember-concurrency-decorators';
import {timeout} from 'ember-concurrency';
import {tracked} from '@glimmer/tracking';
export default Component.extend({ export default class GhLoadingSpinnerComponent extends Component {
tagName: '', @tracked showSpinner = false;
showSpinner: false,
// ms until the loader is displayed, // ms until the loader is displayed,
// prevents unnecessary flash of spinner // prevents unnecessary flash of spinner
slowLoadTimeout: 200, slowLoadTimeout = 200;
didInsertElement() { constructor() {
this._super(...arguments); super(...arguments);
this.startSpinnerTimeout.perform(); this.startSpinnerTimeout.perform();
}, }
startSpinnerTimeout: task(function* () { @task
*startSpinnerTimeout() {
yield timeout(this.slowLoadTimeout); yield timeout(this.slowLoadTimeout);
this.set('showSpinner', true); this.showSpinner = true;
}) }
}); }