FIX #20777 TIME 0:45 don't block document interface when converting

src/frontend/app/document/document.component.html

@@ -45,12 +45,19 @@
     <ion-label style="font-size: 13px;">{{'lang.substitutionInfo' | translate}}</ion-label>
 </ion-toolbar>
 <ion-toolbar class="ion-text-center" color="danger" *ngIf="mainDocument.id !== 0 && mainDocument.status === 'CONVERTING'">
-    <ion-label style="font-size: 13px;">{{'lang.convertingDocument' | translate}}</ion-label>
+    <div class="loading" style="display:flex;height:100%;">
+        <ion-spinner name="dots" color="light" style="left: 530px; top: 12px;"></ion-spinner>
+        <ion-label class="loadingMsg">{{'lang.convertingDocument' | translate}}</ion-label>
+    </div>
 </ion-toolbar>
 <ion-toolbar class="ion-text-center" color="danger" *ngIf="mainDocument.id !== 0 && mainDocument.status === 'ERROR'">
     <ion-label style="font-size: 13px;">{{'lang.errorConvertingDocument' | translate}}</ion-label>
 </ion-toolbar>
 <ion-content *ngIf="!loadingdocument" #mainContent>
+    <!-- <div *ngIf="mainDocument.status === 'READY'" class="loading" style="display:flex;height:100%;">
+        <ion-spinner name="lines" color="primary" style="margin: auto;"></ion-spinner>
+        <ion-label class="loadingMsg">{{'lang.convertingDocument' | translate}}</ion-label>
+    </div> -->
     <ng-container *ngIf="(mainDocument.notes !== undefined && mainDocument.notes !== null) || hasWorkflowNotes">
         <ion-fab-button *ngIf="!expandedNote" ngDraggable [bounds]="myBounds" [inBounds]="true"
             (movingOffset)="signaturesService.dragging=true" (endOffset)="signaturesService.dragging=false"

src/frontend/app/document/document.component.scss

@@ -409,3 +409,22 @@ button.disabled {
         top: 50px;
     }
 }
+
+.loading {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 20px !important;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    overflow: hidden;
+}
+
+.loadingMsg {
+    position: absolute;
+    top: 17px;
+    left: 280px;
+    color: var(--ion-color-light);
+    font-weight: bold;
+}

src/frontend/app/document/document.component.ts

@@ -397,34 +397,25 @@ export class DocumentComponent implements OnInit, OnDestroy {
                             this.load.dismiss();
 
                             if (this.mainDocument.status === 'CONVERTING') {
-                                // CHECK DOCUMENT STATUS
-                                this.loadingController.create({
-                                    message: this.translate.instant('lang.convertingDocument'),
-                                    spinner: 'dots'
-                                }).then((loader: HTMLIonLoadingElement) => {
-                                    this.load = loader;
-                                    this.load.present();
-                                    // timer(0, 10000) call the function immediately and every 10 seconds
-                                    this.timerSubscription = timer(0, 10000).pipe(
-                                        tap(() => {
-                                            this.http.get('../rest/documents/' + params['id']).pipe(
-                                                tap((res: any) => {
-                                                    if (res.document.status !== 'CONVERTING') {
-                                                        this.totalPages = res.document.pages;
-                                                        this.mainDocument.status = res.document.status;
-                                                        this.load.dismiss();
-                                                        this.timerSubscription?.unsubscribe();
-                                                    }
-                                                })
-                                            ).subscribe();
-                                        }),
-                                        catchError((err: any) => {
-                                            this.load.dismiss();
-                                            this.notificationService.handleErrors(err);
-                                            return of(false);
-                                        })
-                                    ).subscribe();
-                                });
+                                // timer(0, 10000) call the function immediately and every 10 seconds
+                                this.timerSubscription = timer(0, 10000).pipe(
+                                    tap(() => {
+                                        this.http.get('../rest/documents/' + params['id']).pipe(
+                                            tap((res: any) => {
+                                                if (res.document.status !== 'CONVERTING') {
+                                                    this.totalPages = res.document.pages;
+                                                    this.mainDocument.status = res.document.status;
+                                                    this.timerSubscription?.unsubscribe();
+                                                }
+                                            })
+                                        ).subscribe();
+                                    }),
+                                    catchError((err: any) => {
+                                        this.load.dismiss();
+                                        this.notificationService.handleErrors(err);
+                                        return of(false);
+                                    })
+                                ).subscribe();
                             }
 
                         }),