feat: Animate load-in of notices

Animate the load-in of notices to make the layout shift less jarring. Closes #1789
DSD-DBS · Sep 12, 2024 · d438346 · d438346
1 parent f43efb9
commit d438346
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;
     });
   }