loader

matsen-tool/src/app/_components/paging/paging.component.html

@@ -15,6 +15,7 @@
                    showFirstLastButtons>
     </mat-paginator>
 </div>
+{{loading}}
 <ng-content></ng-content>
 <div *ngIf="dataLength <= 0" class="spt-no-entries">{{'form.no-data' | translate}}</div>
 <div class="spt-tools single">
@@ -27,4 +28,4 @@
                    showFirstLastButtons>
     </mat-paginator>
 </div>
-
+<span class="spt-loader" *ngIf="loading"></span>

matsen-tool/src/app/_components/paging/paging.component.ts

@@ -1,7 +1,8 @@
 import {ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core';
 import {MatPaginator, MatPaginatorIntl, PageEvent} from "@angular/material/paginator";
 import {FormBuilder, FormGroup} from "@angular/forms";
-import {debounceTime, distinctUntilChanged} from "rxjs";
+import {debounceTime, distinctUntilChanged, Subscription} from "rxjs";
+import {LoadingService} from "@app/_services/loading.service";
 
 @Component({
   selector: 'app-paging',
@@ -25,17 +26,28 @@ export class PagingComponent implements OnInit {
     public pageEvent: PageEvent;
     protected pageIndex: number;
     public searchForm!: FormGroup;
+    public loadingSub: Subscription;
+    public loading: boolean;
 
     constructor(
-        private fb: FormBuilder
+        private fb: FormBuilder,
+        private loadingService: LoadingService
     ) {
         this.dataLength = 0;
         this.pageEvent = new PageEvent();
         this.pageIndex = 0;
         this.searchable = false;
+        this.loadingSub = new Subscription();
+        this.loading = false;
     }
 
     ngOnInit() {
+        this.loadingSub = this.loadingService.getLoading().subscribe(
+            loading => {
+                this.loading = loading;
+                console.log(this.loading);
+            }
+        );
         this.pageSize = this.pageSize !== undefined ? this.pageSize : this.defaultPageSize;
         this.pageSizeOptions = this.pageSizeOptions !== undefined ? this.pageSizeOptions : this.defaultPageSizeOptions;
         this.paginator = new MatPaginator(new MatPaginatorIntl(), ChangeDetectorRef.prototype);
@@ -45,8 +57,8 @@ export class PagingComponent implements OnInit {
                 inputText: ['']
             });
             this.searchForm.get('inputText')?.valueChanges.pipe(
-                debounceTime(1000), // Warte 2 Sekunden
-                distinctUntilChanged() // Nur bei Änderungen auslösen
+                debounceTime(1000),
+                distinctUntilChanged()
             ).subscribe(value => {
                 this.getData()
             });

matsen-tool/src/app/_helpers/loading-interceptor.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
-import {Observable, tap} from 'rxjs';
+import {finalize, Observable, tap} from 'rxjs';
 
 import { environment } from '@environments/environment';
 import { AccountService } from '@app/_services';
@@ -17,15 +17,9 @@ export class LoadingInterceptor implements HttpInterceptor {
 
         this.loadingService.setLoading(true);
         return next.handle(request).pipe(
-            tap({
-                    next: event => {
-                        this.loadingService.setLoading(false);
-                    },
-                    error: error => {
-                        this.loadingService.setLoading(false);
-                    }
-                }
-            )
+            finalize(() => {
+                this.loadingService.setLoading(false);
+            })
         );
     }
 }

matsen-tool/src/app/app.module.ts

@@ -63,6 +63,7 @@ import { UserDetailComponent } from './_views/user/user-detail/user-detail.compo
 import { UserListComponent } from './_views/user/user-list/user-list.component';
 import { AssignProductComponent } from './_views/products/assign-product/assign-product.component';
 import { LinkedLabelComponent } from './_components/linked-label/linked-label.component';
+import {LoadingInterceptor} from "@app/_helpers/loading-interceptor.service";
 
 
 export function apiConfigFactory(): Configuration {
@@ -154,7 +155,7 @@ export function HttpLoaderFactory(http: HttpClient) {
         {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},
         {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true},
         {provide: HTTP_INTERCEPTORS, useClass: PropertyInterceptor, multi: true},
-
+        {provide: HTTP_INTERCEPTORS, useClass: LoadingInterceptor, multi: true},
     ],
     bootstrap: [AppComponent]
 })

matsen-tool/src/assets/scss/_basics.scss

@@ -262,7 +262,9 @@ img {
   margin: 35px auto 0;
   border: 1px solid #FFF;
   border-radius: 0 0 50px 50px;
-  position: relative;
+  position: fixed;
+  left: 50%;
+  top: 50%;
   box-shadow: 0px 0px #FF3D00 inset;
   background-image: linear-gradient(#FF3D00 100px, transparent 0);
   background-position: 0px 0px;