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}} {{#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}}

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