Extracted from atomic-design-poc: RemoteData<E,T> (bare union + fromResource, no combinators) + a trimmed <app-async> switch, no Elm-style store — state is resource() plus one plain signal. Minimal DDD layering per context (domain/infrastructure/application/ui) combined with atomic design inside ui/ (atoms/molecules/organisms/templates/pages), mirroring the POC's conventions at template scale. One worked feature (users/): a list with a click-through to a detail view (its own independent resource() fetch) and a Back action. Tests are BDD-style (describe/it, one assertion per it) and black-box (assert rendered DOM/emitted events only) - 100% branch/line coverage. README.md documents what's deliberately omitted vs. the POC and the concrete growth path back to it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
23 lines
491 B
TypeScript
23 lines
491 B
TypeScript
import { Component } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-spinner',
|
|
template: `<div class="spinner" role="status" aria-label="Loading"></div>`,
|
|
styles: `
|
|
.spinner {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border: 2px solid #ddd;
|
|
border-top-color: #333;
|
|
border-radius: 50%;
|
|
animation: spin 0.6s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
`,
|
|
})
|
|
export class SpinnerComponent {}
|