ehoandClaude Sonnet 5
43dc3210cd
The folder now equals the layer, as CLAUDE.md decision 2 requires. 33 directories move by git mv (25 flat, plus upload/'s 8 subfolders split across all three layers). 28 distinct @shared/ui/* specifiers rewrite across 73 files, longest-first. Five relative imports inside upload/ become @shared/ui aliases because their sibling now lives in a different layer; two stay relative because both ends stay in the same layer. Four .mdx docs get their seven broken story imports fixed; atomic-design.mdx's page-shell import is untouched, because layout/ does not move. No component, template, story title, or layer-tag comment changes. That is RD-28's job. Verified against the ticket's acceptance commands: the 26 flat directories become exactly 3 layer folders with the counts the ticket names, only three @shared/ui/* prefixes remain (atoms, molecules, organisms), the .mdx import count holds at 7, and the relative-import count inside ui/ drops from 7 to 2 as decision 4 requires. The @shared/ui/ occurrence count moves from 200 to 205: decision 4 mandates turning 5 of those 7 relative imports into @shared/ui/* aliases, which decision 3's "200 before, 200 after" check does not account for. The 5-occurrence gap is exactly the 5 conversions decision 4 names, not a lost or duplicated specifier. npm run ci --full passes: lint, typecheck, dep:check, format, tokens, seam, both apps' + both libraries' tests, both apps' localized build, audit, backend tests, all three generated-artifact drift checks, and both Storybook instances' build + axe-core a11y suite (67+45 suites, 198+112 tests, all green). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { Component, OnDestroy, OnInit, computed, input, signal } from '@angular/core';
|
|
|
|
// CIBG-GAP EXTENSION: Laadindicatie — no vendored loading-skeleton class exists
|
|
// (verified absent from huisstijl.min.css); hand-rolled shimmer, see cibg-gaps.mdx.
|
|
/** Atom: skeleton placeholder (grey shimmer). Delay-gated so it never flashes
|
|
on fast responses. Render `count` lines shaped roughly like the content. */
|
|
@Component({
|
|
selector: 'app-skeleton',
|
|
styles: [
|
|
`
|
|
:host {
|
|
display: block;
|
|
}
|
|
.sk {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--rhc-color-cool-grey-200) 25%,
|
|
var(--rhc-color-cool-grey-100) 37%,
|
|
var(--rhc-color-cool-grey-200) 63%
|
|
);
|
|
background-size: 400% 100%;
|
|
animation: sh 1.4s ease infinite;
|
|
border-radius: var(--rhc-border-radius-md);
|
|
margin-block-end: var(--rhc-space-max-lg);
|
|
}
|
|
@keyframes sh {
|
|
0% {
|
|
background-position: 100% 0;
|
|
}
|
|
100% {
|
|
background-position: 0 0;
|
|
}
|
|
}
|
|
`,
|
|
],
|
|
template: `
|
|
@if (visible()) {
|
|
@for (l of lines(); track $index) {
|
|
<div class="sk" aria-hidden="true" [style.width]="width()" [style.height]="height()"></div>
|
|
}
|
|
}
|
|
`,
|
|
})
|
|
export class SkeletonComponent implements OnInit, OnDestroy {
|
|
width = input('100%');
|
|
height = input('1rem');
|
|
count = input(1);
|
|
delay = input(150);
|
|
protected visible = signal(false);
|
|
protected lines = computed(() => Array(this.count()).fill(0));
|
|
private timer?: ReturnType<typeof setTimeout>;
|
|
|
|
ngOnInit() {
|
|
this.timer = setTimeout(() => this.visible.set(true), this.delay());
|
|
}
|
|
ngOnDestroy() {
|
|
clearTimeout(this.timer);
|
|
}
|
|
}
|