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
This commit is contained in:
Kevin Ansfield 2021-10-12 16:01:38 +01:00
parent 3c69d10d90
commit fa6eca9366
2 changed files with 16 additions and 14 deletions

View File

@ -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}}

View File

@ -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;
}
}