From d438346a553e4301e5724bf2348dc40b0abf6524 Mon Sep 17 00:00:00 2001
From: Tobias Messner <tobias@zusor.io>
Date: Thu, 12 Sep 2024 11:33:28 +0200
Subject: [PATCH] feat: Animate load-in of notices

Animate the load-in of notices to make the layout shift less jarring.

Closes #1789
---
 .../src/app/general/notice/notice.component.html | 16 ++++++++++++----
 .../src/app/general/notice/notice.component.ts   |  4 ++--
 .../src/app/services/notice/notice.service.ts    |  2 ++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/general/notice/notice.component.html b/frontend/src/app/general/notice/notice.component.html
index 0e86497dec..bfcf5216f7 100644
--- a/frontend/src/app/general/notice/notice.component.html
+++ b/frontend/src/app/general/notice/notice.component.html
@@ -3,9 +3,17 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<div *ngFor="let notice of noticeService.notices">
-  <div [class]="notice.level" class="collab-card mb-2" style="width: inherit">
-    <h3 class="text-[16px]" [innerHTML]="notice.title"></h3>
-    <p class="text-[14px]" [innerHTML]="notice.message"></p>
+<div
+  class="mt-3 max-h-0 overflow-hidden transition-all duration-700"
+  [ngClass]="{
+    'max-h-[100vh]':
+      noticeService.hasLoaded && noticeService.notices.length > 0,
+  }"
+>
+  <div *ngFor="let notice of noticeService.notices">
+    <div [class]="notice.level" class="collab-card mb-2" style="width: inherit">
+      <h3 class="text-[16px]" [innerHTML]="notice.title"></h3>
+      <p class="text-[14px]" [innerHTML]="notice.message"></p>
+    </div>
   </div>
 </div>
diff --git a/frontend/src/app/general/notice/notice.component.ts b/frontend/src/app/general/notice/notice.component.ts
index cccd1e54d7..12924ae0f9 100644
--- a/frontend/src/app/general/notice/notice.component.ts
+++ b/frontend/src/app/general/notice/notice.component.ts
@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NgFor } from '@angular/common';
+import { NgClass, NgFor } from '@angular/common';
 import { Component, ViewEncapsulation } from '@angular/core';
 import { NoticeService } from '../../services/notice/notice.service';
 
@@ -12,7 +12,7 @@ import { NoticeService } from '../../services/notice/notice.service';
   styleUrls: ['./notice.component.css'],
   encapsulation: ViewEncapsulation.None,
   standalone: true,
-  imports: [NgFor],
+  imports: [NgFor, NgClass],
 })
 export class NoticeComponent {
   constructor(public noticeService: NoticeService) {}
diff --git a/frontend/src/app/services/notice/notice.service.ts b/frontend/src/app/services/notice/notice.service.ts
index 81eca49756..35c05a5ada 100644
--- a/frontend/src/app/services/notice/notice.service.ts
+++ b/frontend/src/app/services/notice/notice.service.ts
@@ -12,6 +12,7 @@ import { environment } from 'src/environments/environment';
 })
 export class NoticeService {
   notices: Notice[] = [];
+  hasLoaded = false;
   noticeLevels = [
     'primary',
     'secondary',
@@ -29,6 +30,7 @@ export class NoticeService {
   refreshNotices(): void {
     this.getNotices().subscribe((res) => {
       this.notices = res;
+      this.hasLoaded = true;
     });
   }