Chore: refactor loading stuff to be more DRY

src-ui/src/app/components/manage/custom-fields/custom-fields.component.html

@@ -13,7 +13,7 @@
 <ul class="list-group">
 
   <li class="list-group-item">
-    <div class="row reveal">
+    <div class="row">
       <div class="col" i18n>Name</div>
       <div class="col" i18n>Data Type</div>
       <div class="col" i18n>Actions</div>
@@ -29,7 +29,7 @@
 
   @for (field of fields; track field) {
     <li class="list-group-item">
-      <div class="row" [class.reveal]="reveal">
+      <div class="row fade" [class.show]="show">
         <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editField(field)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.CustomField)">{{field.name}}</button></div>
         <div class="col d-flex align-items-center">{{getDataType(field)}}</div>
         <div class="col">

src-ui/src/app/components/manage/custom-fields/custom-fields.component.scss

@@ -2,12 +2,3 @@
 .d-block.d-sm-none .dropdown-toggle::after {
     display: none;
 }
-
-.list-group-item .row {
-    opacity: 0;
-    transition: opacity .2s;
-}
-
-.list-group-item .reveal {
-    opacity: 1;
-}

src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts

@@ -54,7 +54,7 @@ export class CustomFieldsComponent
         delay(100)
       )
       .subscribe(() => {
-        this.reveal = true
+        this.show = true
         this.loading = false
       })
   }