From 5027f099cf40e72c57b6296a5c14dee6031e2eb3 Mon Sep 17 00:00:00 2001
From: Edwin van den Houdt <eho@respellion.nl>
Date: Wed, 1 Jul 2026 17:14:29 +0200
Subject: [PATCH] Mijn aanvragen: list enter/leave animations + 204 null-body
 fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/app/registratie/ui/dashboard.page.ts       |  2 +-
 .../infrastructure/api-client.provider.ts      |  4 +++-
 .../document-category.component.ts             |  2 ++
 src/styles.scss                                | 18 ++++++++++++++++++
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/app/registratie/ui/dashboard.page.ts b/src/app/registratie/ui/dashboard.page.ts
index 01a13d1..b7c1d0e 100644
--- a/src/app/registratie/ui/dashboard.page.ts
+++ b/src/app/registratie/ui/dashboard.page.ts
@@ -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>
diff --git a/src/app/shared/infrastructure/api-client.provider.ts b/src/app/shared/infrastructure/api-client.provider.ts
index 5cf8662..cec9e5b 100644
--- a/src/app/shared/infrastructure/api-client.provider.ts
+++ b/src/app/shared/infrastructure/api-client.provider.ts
@@ -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;
diff --git a/src/app/shared/ui/upload/document-category/document-category.component.ts b/src/app/shared/ui/upload/document-category/document-category.component.ts
index 35fb302..1bf3b3b 100644
--- a/src/app/shared/ui/upload/document-category/document-category.component.ts
+++ b/src/app/shared/ui/upload/document-category/document-category.component.ts
@@ -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)"
diff --git a/src/styles.scss b/src/styles.scss
index 411a61f..0e9acb2 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -86,8 +86,26 @@ app-site-footer { view-transition-name: site-footer; }
   animation-timing-function: ease;
 }
 
+/* List-item enter/leave for lists that add/remove at runtime (aanvraag cards, upload
+   rows). Used via Angular's native `animate.enter`/`animate.leave` — no @angular/animations. */
+@keyframes app-item-enter { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: none; } }
+@keyframes app-item-leave {
+  from { opacity: 1; max-block-size: 50rem; }
+  to   { opacity: 0; transform: translateY(-0.25rem); max-block-size: 0; margin-block: 0; padding-block: 0; }
+}
+.app-item-enter { animation: app-item-enter 220ms ease both; }
+.app-item-leave {
+  display: block;   /* collapse needs block formatting (host is inline/flex by default) */
+  overflow: hidden;
+  pointer-events: none;
+  /* ponytail: 50rem max-height hack; if an item is taller the collapse eases slightly late — measure height in JS then. */
+  animation: app-item-leave 260ms ease both;
+}
+
 @media (prefers-reduced-motion: reduce) {
   ::view-transition-group(*),
   ::view-transition-old(*),
   ::view-transition-new(*) { animation: none !important; }
+  /* No animation → Angular removes the leaving node immediately (instant, no motion). */
+  .app-item-enter, .app-item-leave { animation: none; }
 }