Chore: refactor loading stuff to be more DRY

This commit is contained in:
shamoon
2024-12-09 12:36:48 -08:00
parent c2e34b36ce
commit 0a7c296194
34 changed files with 87 additions and 110 deletions

View File

@@ -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"
[ngStyle]="{ opacity: !loading && reveal ? 1 : 1 - (i * 1/documents.length) }"
[document]="!loading && show ? d : null"
[ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
[displayFields]="displayFields"
(clickTag)="clickTag($event)"
(clickCorrespondent)="clickCorrespondent($event)"

View File

@@ -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;
}

View File

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