Edwin van den Houdt
e82309786d
One-time prettier --write so the new format:check CI gate starts green. .prettierignore excludes generated (api-client.ts, documentation.json), vendored (public/cibg-huisstijl), and backend (dotnet format owns it). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { Component, OnDestroy, OnInit, input, signal } from '@angular/core';
|
|
|
|
/** Atom: spinner that only appears after `delay` ms — fast responses never
|
|
flash a spinner, slow ones get feedback. */
|
|
@Component({
|
|
selector: 'app-spinner',
|
|
styles: [
|
|
`
|
|
:host {
|
|
display: block;
|
|
}
|
|
.sp {
|
|
inline-size: var(--rhc-space-max-3xl);
|
|
block-size: var(--rhc-space-max-3xl);
|
|
border-radius: var(--rhc-border-radius-round);
|
|
border: var(--rhc-space-max-xs) solid var(--rhc-color-cool-grey-300);
|
|
border-block-start-color: var(--rhc-color-lintblauw-700);
|
|
animation: sp 0.8s linear infinite;
|
|
margin: var(--rhc-space-max-2xl) auto;
|
|
}
|
|
@keyframes sp {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
`,
|
|
],
|
|
template: `
|
|
@if (visible()) {
|
|
<div
|
|
class="sp"
|
|
role="status"
|
|
i18n-aria-label="@@spinner.aria"
|
|
aria-label="Bezig met laden"
|
|
></div>
|
|
}
|
|
`,
|
|
})
|
|
export class SpinnerComponent implements OnInit, OnDestroy {
|
|
delay = input(250);
|
|
protected visible = signal(false);
|
|
private timer?: ReturnType<typeof setTimeout>;
|
|
|
|
ngOnInit() {
|
|
this.timer = setTimeout(() => this.visible.set(true), this.delay());
|
|
}
|
|
ngOnDestroy() {
|
|
clearTimeout(this.timer);
|
|
}
|
|
}
|