Mijn aanvragen: list enter/leave animations + 204 null-body fix

- animate.enter/leave on aanvraag cards and upload rows (native Angular, no @angular/animations)
- reduced-motion: skip animation → instant removal
- api-client: null-body statuses (204/205/304) must pass null to Response()

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-01 17:14:29 +02:00
parent 0f14239f68
commit 5027f099cf
4 changed files with 24 additions and 2 deletions

View File

@@ -39,7 +39,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
<app-heading [level]="2" i18n="@@dashboard.mijnAanvragen">Mijn aanvragen</app-heading>
<div class="app-stack app-section">
@for (a of aanvragen(); track a.id) {
<app-aanvraag-block [aanvraag]="a" (resume)="resume(a)" (cancel)="cancelAanvraag(a)" />
<app-aanvraag-block animate.enter="app-item-enter" animate.leave="app-item-leave" [aanvraag]="a" (resume)="resume(a)" (cancel)="cancelAanvraag(a)" />
}
</div>
</section>

View File

@@ -40,7 +40,9 @@ function httpClientFetch(http: HttpClient) {
})
.pipe(timeout(REQUEST_TIMEOUT_MS)),
);
return new Response(res.body ?? '', { status: res.status || 200 });
// 204/205/304 are null-body statuses — new Response(body, …) throws for any non-null body.
const nullBody = res.status === 204 || res.status === 205 || res.status === 304;
return new Response(nullBody ? null : (res.body ?? ''), { status: res.status || 200 });
} catch (e) {
if (e instanceof TimeoutError) return new Response('', { status: 504 });
const err = e as HttpErrorResponse;

View File

@@ -50,6 +50,8 @@ import { SingleUploadComponent } from '../single-upload/single-upload.component'
<div class="uploads">
@for (u of uploads(); track u.localId) {
<app-single-upload
animate.enter="app-item-enter"
animate.leave="app-item-leave"
[upload]="u"
[previewUrlFor]="previewUrlFor()"
(remove)="onRemove(u)"