Print loading indicator

src-ui/src/app/app.module.ts

@@ -135,6 +135,7 @@ import localeSv from '@angular/common/locales/sv'
 import localeTr from '@angular/common/locales/tr'
 import localeUk from '@angular/common/locales/uk'
 import localeZh from '@angular/common/locales/zh'
+import { LoadingDialogComponent } from './components/common/loading-dialog/loading-dialog.component'
 
 registerLocaleData(localeAf)
 registerLocaleData(localeAr)
@@ -256,6 +257,7 @@ function initializeApp(settings: SettingsService) {
     CustomFieldsComponent,
     CustomFieldEditDialogComponent,
     CustomFieldsDropdownComponent,
+    LoadingDialogComponent,
   ],
   imports: [
     BrowserModule,

src-ui/src/app/components/common/loading-dialog/loading-dialog.component.html

@@ -0,0 +1,14 @@
+<div class="modal-header">
+    <h6 class="modal-title" id="modal-basic-title">Please wait</h6>
+</div>
+<div class="modal-body">
+    <div class="mb-2" i18n>{{verb}} {{current}} of {{total}}</div>
+    <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+        <div class="progress-bar bg-primary"
+            role="progressbar"
+            [style.width]="(current / total) * 100 + '%'"
+            [attr.aria-valuenow]="(current / total) * 100">
+        </div>
+      </div>
+</div>
+<div class="modal-footer"></div>

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { LoadingDialogComponent } from './loading-dialog.component'
+
+describe('LoadingDialogComponent', () => {
+  let component: LoadingDialogComponent
+  let fixture: ComponentFixture<LoadingDialogComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [LoadingDialogComponent],
+    })
+    fixture = TestBed.createComponent(LoadingDialogComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('needs tests', () => {
+    expect(false).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+
+@Component({
+  selector: 'pngx-loading-dialog',
+  templateUrl: './loading-dialog.component.html',
+  styleUrls: ['./loading-dialog.component.scss'],
+})
+export class LoadingDialogComponent {
+  constructor(public activeModal: NgbActiveModal) {}
+
+  @Input()
+  verb: string = $localize`Loading`
+
+  @Input()
+  total: number
+
+  @Input()
+  current: number
+}

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -15,7 +15,7 @@
             <button class="btn btn-outline-secondary" (click)="increaseZoom()" i18n>+</button>
         </div>
         <div class="input-group input-group-sm me-5 d-none d-md-flex">
-            <button class="btn btn-sm btn-outline-secondary me-5" (click)="print()">
+            <button class="btn btn-sm btn-outline-secondary me-5" (click)="print()" [disabled]="printLoadingModal">
                 <svg class="buttonicon-sm" fill="currentColor">
                     <use xlink:href="assets/bootstrap-icons.svg#printer" />
                 </svg><span class="ps-2" i18n>Print</span>
@@ -257,6 +257,9 @@
                 (pagesLoaded)="onPagesLoaded($event)"
                 (pdfLoadingStarts)="onPdfLoadingStarts()"
                 (pdfLoadingFailed)="onPdfLoadingFailed($event)"
+                (beforePrint)="onBeforePrint()"
+                (afterPrint)="onAfterPrint()"
+                (progress)="onProgress($event)"
                 [(page)]="previewCurrentPage">
             </ngx-extended-pdf-viewer>
         </div>

src-ui/src/app/components/document-detail/document-detail.component.scss

@@ -20,6 +20,10 @@
     top: 0 !important;
     background-color: gray !important;
   }
+
+  ::ng-deep #printServiceDialog {
+    display: none !important;
+  }
 }
 
 ::ng-deep .ng-select-taggable {

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -10,6 +10,7 @@ import { ActivatedRoute, Router } from '@angular/router'
 import {
   NgbDateStruct,
   NgbModal,
+  NgbModalRef,
   NgbNav,
   NgbNavChangeEvent,
 } from '@ng-bootstrap/ng-bootstrap'
@@ -78,6 +79,8 @@ import { InvalidPDFException } from 'ngx-extended-pdf-viewer/lib/events/invalid-
 import { PagesLoadedEvent } from 'ngx-extended-pdf-viewer/lib/events/pages-loaded-event'
 import { NgxExtendedPdfViewerService } from 'ngx-extended-pdf-viewer'
 import { pdfDefaultOptions } from 'ngx-extended-pdf-viewer'
+import { LoadingDialogComponent } from '../common/loading-dialog/loading-dialog.component'
+import { ProgressBarEvent } from 'ngx-extended-pdf-viewer/lib/events/progress-bar-event'
 
 enum DocumentDetailNavIDs {
   Details = 1,
@@ -156,6 +159,8 @@ export class DocumentDetailComponent
   previewZoomSetting: ZoomSetting = ZoomSetting.Width
   previewLoading: boolean = true
 
+  printLoadingModal: NgbModalRef
+
   store: BehaviorSubject<any>
   isDirty$: Observable<boolean>
   unsubscribeNotifier: Subject<any> = new Subject()
@@ -839,6 +844,29 @@ export class DocumentDetailComponent
     this.printService.print()
   }
 
+  onBeforePrint(): void {
+    this.printLoadingModal = this.modalService.open(LoadingDialogComponent, {
+      backdrop: 'static',
+    })
+    const loadingDialog = this.printLoadingModal
+      .componentInstance as LoadingDialogComponent
+    loadingDialog.verb = $localize`Processing page`
+  }
+
+  onProgress(event: ProgressBarEvent): void {
+    if (event.type === 'print' && this.printLoadingModal) {
+      const loadingDialog = this.printLoadingModal
+        .componentInstance as LoadingDialogComponent
+      loadingDialog.current = event.page ?? 0
+      loadingDialog.total = event.total
+    }
+  }
+
+  onAfterPrint(): void {
+    this.printLoadingModal.close()
+    this.printLoadingModal = null
+  }
+
   get showPermissions(): boolean {
     return (
       this.permissionsService.currentUserCan(