amorfo77/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2026-07-09 13:35:10 +00:00
Code Issues Projects Releases Wiki Activity

Update some global components with loading signals

Browse Source
This commit is contained in:
shamoon
2026-07-06 20:09:58 -07:00
parent 0c5cfb2254
commit 3755070e1f
9 changed files with 196 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
+42 -7
View File
@@ -1,11 +1,14 @@
<pngx-widget-frame
*pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"
[title]="savedView.name"
[badge]="count"
[loading]="loading"
[loading]="false"
[draggable]="savedView"
>
@if (count !== null) {
<span title-badge class="badge bg-info text-dark ms-2">{{count}}</span>
}
@if (documents.length) {
<a class="btn-link text-decoration-none" header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>
}
@@ -30,11 +33,24 @@
</tr>
</thead>
<tbody>
@if (loading && !documents.length) {
@for (row of placeholderRows; track row) {
<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 }">
<div class="placeholder-glow text-start">
<span class="placeholder bg-secondary w-50" [ngStyle]="{ opacity: 1 - (row * 1/placeholderRows.length) }"></span>
</div>
</td>
}
</tr>
}
}
@for (doc of documents; track doc.id; let i = $index) {
<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 && show) {
@if (loading && !documents.length) {
<div class="placeholder-glow text-start">
<span class="placeholder bg-secondary w-50" [ngStyle]="{ opacity: 1 - (i * 1/documents.length) }"></span>
</div>
@@ -115,12 +131,22 @@
</table>
} @else if (displayMode === DisplayMode.SMALL_CARDS) {
<div class="row row-cols-paperless-cards my-n2">
@if (loading && !documents.length) {
@for (row of placeholderRows; track row) {
<pngx-document-card-small
class="p-0"
[ngStyle]="{ opacity: 1 - (row * 1/placeholderRows.length) }"
[document]="null"
[displayFields]="displayFields">
</pngx-document-card-small>
}
}
@for (d of documents; track d.id; let i = $index) {
<pngx-document-card-small
class="p-0"
[ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
[ngStyle]="{ opacity: show ? 1 : 1 - (i * 1/documents.length) }"
(dblClickDocument)="openDocumentDetail(d)"
[document]="!loading && show ? d : null"
[document]="d"
[displayFields]="displayFields"
(clickTag)="clickTag($event)"
(clickCorrespondent)="clickCorrespondent($event)"
@@ -131,11 +157,20 @@
</div>
} @else if (displayMode === DisplayMode.LARGE_CARDS) {
<div class="row my-n2">
@if (loading && !documents.length) {
@for (row of placeholderRows; track row) {
<pngx-document-card-large
[document]="null"
[ngStyle]="{ opacity: 1 - (row * 1/placeholderRows.length) }"
[displayFields]="displayFields">
</pngx-document-card-large>
}
}
@for (d of documents; track d.id; let i = $index) {
<pngx-document-card-large
(dblClickDocument)="openDocumentDetail(d)"
[document]="!loading && show ? d : null"
[ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
[document]="d"
[ngStyle]="{ opacity: show ? 1 : 1 - (i * 1/documents.length) }"
[displayFields]="displayFields"
(clickTag)="clickTag($event)"
(clickCorrespondent)="clickCorrespondent($event)"