Chore: refactor loading stuff to be more DRY

src-ui/messages.xlf

@@ -5177,7 +5177,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/document-card-small/document-card-small.component.ts</context>
-          <context context-type="linenumber">79</context>
+          <context context-type="linenumber">89</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2504502765849142619" datatype="html">

src-ui/src/app/components/admin/trash/trash.component.html

@@ -47,7 +47,7 @@
                 </tr>
             }
             @for (document of documentsInTrash; track document.id) {
-                <tr (click)="toggleSelected(document); $event.stopPropagation();" (mouseleave)="popupPreview.close()" class="data-row" [class.reveal]="reveal">
+                <tr (click)="toggleSelected(document); $event.stopPropagation();" (mouseleave)="popupPreview.close()" 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="{{document.id}}" [checked]="selectedDocuments.has(document.id)" (click)="toggleSelected(document); $event.stopPropagation();">

src-ui/src/app/components/admin/trash/trash.component.scss

@@ -1,8 +0,0 @@
-.data-row {
-    opacity: 0;
-    transition: opacity .2s;
-}
-
-.reveal {
-    opacity: 1;
-}

src-ui/src/app/components/admin/trash/trash.component.ts

@@ -50,7 +50,7 @@ export class TrashComponent
         delay(100)
       )
       .subscribe(() => {
-        this.reveal = true
+        this.show = true
       })
   }
 

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -9,7 +9,7 @@
     <a class="btn-link text-decoration-none" header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>
   }
 
-  <div content class="wrapper" [class.reveal]="reveal">
+  <div content class="wrapper fade" [class.show]="show">
   @if (displayMode === DisplayMode.TABLE) {
     <table class="table table-hover mb-0 mt-n2 align-middle">
       <thead>
@@ -33,7 +33,7 @@
           <tr>
             @for (field of displayFields; track field; let j = $index) {
               <td class="py-2 py-md-3 position-relative" [ngClass]="{ 'd-none d-md-table-cell': j > 1 }">
-                @if (loading && reveal) {
+                @if (loading && show) {
                   <div class="placeholder-glow text-start">
                     <span class="placeholder bg-secondary w-50" [ngStyle]="{ opacity: 1 - (i * 1/documents.length) }"></span>
                   </div>
@@ -94,9 +94,9 @@
       @for (d of documents; track d.id; let i = $index) {
         <pngx-document-card-small
           class="p-0"
-          [ngStyle]="{ opacity: !loading && reveal ? 1 : 1 - (i * 1/documents.length) }"
+          [ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
           (dblClickDocument)="openDocumentDetail(d)"
-          [document]="!loading && reveal ? d : null"
+          [document]="!loading && show ? d : null"
           [displayFields]="displayFields"
           (clickTag)="clickTag($event)"
           (clickCorrespondent)="clickCorrespondent($event)"
@@ -110,8 +110,8 @@
       @for (d of documents; track d.id; let i = $index) {
         <pngx-document-card-large
           (dblClickDocument)="openDocumentDetail(d)"
-          [document]="!loading && reveal ? d : null"
+          [document]="!loading && show ? d : null"
-          [ngStyle]="{ opacity: !loading && reveal ? 1 : 1 - (i * 1/documents.length) }"
+          [ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
           [displayFields]="displayFields"
           (clickTag)="clickTag($event)"
           (clickCorrespondent)="clickCorrespondent($event)"

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss

@@ -2,13 +2,11 @@
   transition: all .3s ease-out;
   overflow: hidden;
   max-height: 0;
-  opacity: .1;
   width: 100%;
 }
 
-.reveal {
+.show {
   max-height: 1000px;
-  opacity: 1;
   overflow: visible;
 }
 

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -140,7 +140,7 @@ export class SavedViewWidgetComponent
       .pipe(
         takeUntil(this.unsubscribeNotifier),
         tap((result) => {
-          this.reveal = true
+          this.show = true
           this.documents = result.results
         }),
         delay(500)

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html

@@ -1,4 +1,4 @@
-<div class="card shadow-sm bg-light fade" [class.reveal]="reveal" cdkDrag [cdkDragDisabled]="!draggable" cdkDragPreviewContainer="parent">
+<div class="card shadow-sm bg-light fade" [class.show]="show" cdkDrag [cdkDragDisabled]="!draggable" cdkDragPreviewContainer="parent">
   <div class="card-header">
     <div class="d-flex justify-content-between align-items-center">
       <div class="d-flex">

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss

@@ -1,12 +1,3 @@
 i-bs {
     cursor: move;
 }
-
-.card {
-    opacity: 0;
-    transition: opacity .2s;
-}
-
-.reveal {
-    opacity: 1;
-}

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts

@@ -53,9 +53,9 @@ describe('WidgetFrameComponent', () => {
     expect(fixture.debugElement.query(By.css('.spinner-border'))).not.toBeNull()
   })
 
-  it('should reveal', () => {
+  it('should show', () => {
-    expect(component.reveal).toBeFalsy()
+    expect(component.show).toBeFalsy()
     jest.advanceTimersByTime(100)
-    expect(component.reveal).toBeTruthy()
+    expect(component.show).toBeTruthy()
   })
 })

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts

@@ -25,7 +25,7 @@ export class WidgetFrameComponent
 
   ngAfterViewInit(): void {
     setTimeout(() => {
-      this.reveal = true
+      this.show = true
     }, 100)
   }
 }

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -1,4 +1,4 @@
-<div class="card document-card-large mb-3 shadow-sm bg-light placeholder-glow" [class.card-selected]="selected" [class.document-card]="selectable" (mouseleave)="mouseLeaveCard()">
+<div class="card document-card-large mb-3 shadow-sm bg-light placeholder-glow fade" [class.show]="show" [class.card-selected]="selected" [class.document-card]="selectable" (mouseleave)="mouseLeaveCard()">
   <div class="row g-0">
     <div class="col-md-2 doc-img-container rounded-start" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit()">
       @if (document) {

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts

@@ -71,6 +71,14 @@ describe('DocumentCardLargeComponent', () => {
     component = fixture.componentInstance
     component.document = doc
     fixture.detectChanges()
+    jest.useFakeTimers()
+  })
+
+  it('should show the card', () => {
+    expect(component.show).toBeFalsy()
+    component.ngAfterViewInit()
+    jest.advanceTimersByTime(100)
+    expect(component.show).toBeTruthy()
   })
 
   it('should display a document', () => {

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts

@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   Component,
   EventEmitter,
   Input,
@@ -13,7 +14,7 @@ import {
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
 
 @Component({
@@ -21,7 +22,10 @@ import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.
   templateUrl: './document-card-large.component.html',
   styleUrls: ['./document-card-large.component.scss'],
 })
-export class DocumentCardLargeComponent extends ComponentWithPermissions {
+export class DocumentCardLargeComponent
+  extends LoadingComponentWithPermissions
+  implements AfterViewInit
+{
   DisplayField = DisplayField
 
   constructor(
@@ -70,6 +74,12 @@ export class DocumentCardLargeComponent extends ComponentWithPermissions {
   mouseOnPreview = false
   popoverHidden = true
 
+  ngAfterViewInit(): void {
+    setInterval(() => {
+      this.show = true
+    }, 100)
+  }
+
   get searchScoreClass() {
     if (this.document.__search_hit__) {
       if (this.document.__search_hit__.score > 0.7) {

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -1,4 +1,4 @@
-<div class="col p-2 h-100">
+<div class="col p-2 h-100 fade" [class.show]="show">
   <div class="card h-100 shadow-sm document-card" [class.placeholder-glow]="!document" [class.card-selected]="selected" (mouseleave)="mouseLeaveCard()">
     <div class="border-bottom doc-img-container rounded-top" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit(this)">
       @if (document) {

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts

@@ -85,6 +85,14 @@ describe('DocumentCardSmallComponent', () => {
     component = fixture.componentInstance
     component.document = Object.assign({}, doc)
     fixture.detectChanges()
+    jest.useFakeTimers()
+  })
+
+  it('should show the card', () => {
+    expect(component.show).toBeFalsy()
+    component.ngAfterViewInit()
+    jest.advanceTimersByTime(100)
+    expect(component.show).toBeTruthy()
   })
 
   it('should display page count', () => {

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   Component,
   EventEmitter,
   Input,
@@ -14,7 +15,7 @@ import {
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
 
 @Component({
@@ -22,7 +23,10 @@ import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.
   templateUrl: './document-card-small.component.html',
   styleUrls: ['./document-card-small.component.scss'],
 })
-export class DocumentCardSmallComponent extends ComponentWithPermissions {
+export class DocumentCardSmallComponent
+  extends LoadingComponentWithPermissions
+  implements AfterViewInit
+{
   DisplayField = DisplayField
 
   constructor(
@@ -63,6 +67,12 @@ export class DocumentCardSmallComponent extends ComponentWithPermissions {
 
   @ViewChild('popupPreview') popupPreview: PreviewPopupComponent
 
+  ngAfterViewInit(): void {
+    setInterval(() => {
+      this.show = true
+    }, 50)
+  }
+
   getIsThumbInverted() {
     return this.settingsService.get(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED)
   }

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html

@@ -1,6 +1,6 @@
 <div class="row flex-wrap row-gap-3" tourAnchor="tour.documents-filter-editor">
   <div class="col">
-    <div class="form-inline d-flex align-items-center fade" [class.reveal]="reveal">
+    <div class="form-inline d-flex align-items-center fade" [class.show]="show">
       <div class="input-group input-group-sm flex-fill w-auto flex-nowrap">
         <div ngbDropdown>
           <button class="btn btn-sm btn-outline-primary" ngbDropdownToggle>{{textFilterTargetName}}</button>
@@ -36,7 +36,7 @@
     <div class="d-flex flex-wrap gap-3">
       <div class="d-flex flex-wrap gap-2">
         @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.Tag) && tags.length > 0) {
-          <pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Tags" icon="tag-fill" i18n-title
+          <pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Tags" icon="tag-fill" i18n-title
           filterPlaceholder="Filter tags" i18n-filterPlaceholder
           [items]="tags"
           [manyToOne]="true"
@@ -49,7 +49,7 @@
           shortcutKey="t"></pngx-filterable-dropdown>
         }
         @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.Correspondent) && correspondents.length > 0) {
-          <pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Correspondent" icon="person-fill" i18n-title
+          <pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Correspondent" icon="person-fill" i18n-title
           filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
           [items]="correspondents"
           [(selectionModel)]="correspondentSelectionModel"
@@ -61,7 +61,7 @@
           shortcutKey="y"></pngx-filterable-dropdown>
         }
         @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.DocumentType) && documentTypes.length > 0) {
-            <pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Document type" icon="file-earmark-fill" i18n-title
+            <pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Document type" icon="file-earmark-fill" i18n-title
             filterPlaceholder="Filter document types" i18n-filterPlaceholder
             [items]="documentTypes"
             [(selectionModel)]="documentTypeSelectionModel"
@@ -73,7 +73,7 @@
             shortcutKey="u"></pngx-filterable-dropdown>
         }
         @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.StoragePath) && storagePaths.length > 0) {
-          <pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Storage path" icon="folder-fill" i18n-title
+          <pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Storage path" icon="folder-fill" i18n-title
           filterPlaceholder="Filter storage paths" i18n-filterPlaceholder
           [items]="storagePaths"
           [(selectionModel)]="storagePathSelectionModel"
@@ -86,12 +86,12 @@
         }
 
         @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.CustomField) && customFields.length > 0) {
-          <pngx-custom-fields-query-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Custom fields" icon="ui-radios" i18n-title
+          <pngx-custom-fields-query-dropdown class="flex-fill fade" [class.show]="show" title="Custom fields" icon="ui-radios" i18n-title
           [(selectionModel)]="customFieldQueriesModel"
           (selectionModelChange)="updateRules()"
           ></pngx-custom-fields-query-dropdown>
         }
-        <pngx-dates-dropdown class="flex-fill fade" [class.reveal]="reveal"
+        <pngx-dates-dropdown class="flex-fill fade" [class.show]="show"
           title="Dates" i18n-title
           (datesSet)="updateRules()"
           [(createdDateBefore)]="dateCreatedBefore"
@@ -101,7 +101,7 @@
           [(addedDateAfter)]="dateAddedAfter"
           [(addedRelativeDate)]="dateAddedRelativeDate">
         </pngx-dates-dropdown>
-        <pngx-permissions-filter-dropdown class="flex-fill fade" [class.reveal]="reveal"
+        <pngx-permissions-filter-dropdown class="flex-fill fade" [class.show]="show"
           title="Permissions" i18n-title
           (ownerFilterSet)="updateRules()"
         [(selectionModel)]="permissionsSelectionModel"></pngx-permissions-filter-dropdown>

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss

@@ -25,7 +25,3 @@ input[type="text"] {
 .z-10 {
   z-index: 10;
 }
-
-.reveal {
-  opacity: 1;
-}

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts

@@ -961,7 +961,7 @@ export class FilterEditorComponent
     this.loadingCount++
     if (this.loadingCount == this.loadingCountTotal) {
       this.loading = false
-      this.reveal = true
+      this.show = true
     }
   }
 

src-ui/src/app/components/loading-component/loading.component.spec.ts

@@ -29,8 +29,8 @@ describe('LoadingComponentWithPermissions', () => {
     expect(component.loading).toBeTruthy()
   })
 
-  it('should have reveal set to false by default', () => {
+  it('should have show set to false by default', () => {
-    expect(component.reveal).toBeFalsy()
+    expect(component.show).toBeFalsy()
   })
 
   it('should call next and complete on unsubscribeNotifier with itself on destroy', () => {

src-ui/src/app/components/loading-component/loading.component.ts

@@ -8,7 +8,7 @@ export abstract class LoadingComponentWithPermissions
   implements OnDestroy
 {
   public loading: boolean = true
-  public reveal: boolean = false
+  public show: boolean = false
 
   protected unsubscribeNotifier: Subject<any> = new Subject()
 

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
       })
   }

src-ui/src/app/components/manage/mail/mail.component.html

@@ -26,7 +26,7 @@
   </h4>
   <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>Server</div>
         <div class="col d-none d-sm-block" i18n>Username</div>
@@ -43,7 +43,7 @@
 
     @for (account of mailAccounts; track account) {
       <li class="list-group-item">
-        <div class="row" [class.reveal]="revealAccounts">
+        <div class="row fade" [class.show]="showAccounts">
           <div class="col d-flex align-items-center">
             <button class="btn btn-link p-0 text-start" type="button" (click)="editMailAccount(account)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailAccount)">
               {{account.name}}@switch (account.account_type) {
@@ -99,7 +99,7 @@
   </h4>
   <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 d-none d-sm-block" i18n>Sort Order</div>
         <div class="col" i18n>Account</div>
@@ -117,7 +117,7 @@
 
     @for (rule of mailRules; track rule) {
       <li class="list-group-item">
-        <div class="row" [class.reveal]="revealRules">
+        <div class="row fade" [class.show]="showRules">
           <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editMailRule(rule)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailRule)">{{rule.name}}</button></div>
           <div class="col d-flex align-items-center d-none d-sm-flex">{{rule.order}}</div>
           <div class="col d-flex align-items-center">{{(mailAccountService.getCached(rule.account) | async)?.name}}</div>

src-ui/src/app/components/manage/mail/mail.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/mail/mail.component.ts

@@ -48,9 +48,9 @@ export class MailComponent
   }
 
   public loadingRules: boolean = true
-  public revealRules: boolean = false
+  public showRules: boolean = false
   public loadingAccounts: boolean = true
-  public revealAccounts: boolean = false
+  public showAccounts: boolean = false
 
   constructor(
     public mailAccountService: MailAccountService,
@@ -85,7 +85,7 @@ export class MailComponent
       .subscribe({
         next: () => {
           this.loadingAccounts = false
-          this.revealAccounts = true
+          this.showAccounts = true
         },
         error: (e) => {
           this.toastService.showError(
@@ -108,7 +108,7 @@ export class MailComponent
       .subscribe({
         next: (r) => {
           this.loadingRules = false
-          this.revealRules = true
+          this.showRules = true
         },
         error: (e) => {
           this.toastService.showError($localize`Error retrieving mail rules`, e)

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
       })
   }

src-ui/src/app/components/manage/workflows/workflows.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 d-none d-sm-flex" i18n>Sort order</div>
       <div class="col" i18n>Status</div>
@@ -31,7 +31,7 @@
 
   @for (workflow of workflows; track workflow.id) {
     <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)="editWorkflow(workflow)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.Workflow)">{{workflow.name}}</button></div>
         <div class="col d-flex align-items-center d-none d-sm-flex"><code>{{workflow.order}}</code></div>
         <div class="col d-flex align-items-center">
@@ -77,6 +77,6 @@
     </li>
   }
   @if (!loading && workflows.length === 0) {
-    <li class="list-group-item" [class.reveal]="reveal" i18n>No workflows defined.</li>
+    <li class="list-group-item" [class.show]="show" i18n>No workflows defined.</li>
   }
 </ul>

src-ui/src/app/components/manage/workflows/workflows.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/workflows/workflows.component.ts

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