Chore: refactor loading stuff to be more DRY

src-ui/src/app/components/manage/management-list/management-list.component.html

@@ -53,7 +53,7 @@
         </tr>
       }
       @for (object of data; track object) {
-        <tr (click)="toggleSelected(object); $event.stopPropagation();" class="data-row" [class.reveal]="reveal">
+        <tr (click)="toggleSelected(object); $event.stopPropagation();" class="data-row fade" [class.show]="show">
           <td>
             <div class="form-check m-0 ms-2 me-n2">
               <input type="checkbox" class="form-check-input" id="{{typeName}}{{object.id}}" [checked]="selectedObjects.has(object.id)" (click)="toggleSelected(object); $event.stopPropagation();">

src-ui/src/app/components/manage/management-list/management-list.component.scss

@@ -10,12 +10,3 @@ tbody tr:last-child td {
 .form-check {
     min-height: 0;
 }
-
-.data-row {
-    opacity: 0;
-    transition: opacity .2s;
-}
-
-.reveal {
-    opacity: 1;
-}

src-ui/src/app/components/manage/management-list/management-list.component.ts

@@ -153,7 +153,7 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
         delay(100)
       )
       .subscribe(() => {
-        this.reveal = true
+        this.show = true
         this.loading = false
       })
   }