OZG-531 styling spinner, add test for loaded spinner

goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.scss

 mat-spinner {
 	margin: auto;
 }
+
+p {
+	color: #999;
+}

goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIcon } from '@angular/material/icon';
 import { MatSpinner } from '@angular/material/progress-spinner';
-import { createEmptyStateResource, StateResource } from '@goofy-client/tech-shared';
+import { createEmptyStateResource } from '@goofy-client/tech-shared';
 import { SpinnerComponent } from './spinner.component';
-import { Component } from '@angular/core';
-
-@Component({
-	template: `<goofy-client-spinner [stateResource]="stateResource"></goofy-client-spinner>`,
-})
-export class TestWrapperComponent {
-	stateResource: StateResource<any> = createEmptyStateResource();
-}
 
 describe('SpinnerComponent', () => {
-	let component: TestWrapperComponent;
-	let fixture: ComponentFixture<TestWrapperComponent>;
+	let component: SpinnerComponent;
+	let fixture: ComponentFixture<SpinnerComponent>;
 	const spinnerSelector = '[data-test-class="spinner"]'
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
 			declarations: [
 				SpinnerComponent,
-				TestWrapperComponent,
 				MatIcon,
 				MatSpinner
-			]
-		})
-			.compileComponents();
+			],
+		}).compileComponents();
 	});
 
 	beforeEach(() => {
-		fixture = TestBed.createComponent(TestWrapperComponent);
+		fixture = TestBed.createComponent(SpinnerComponent);
 		component = fixture.componentInstance;
+
 		fixture.detectChanges();
 	});
 
@@ -58,4 +49,27 @@ describe('SpinnerComponent', () => {
 			expect(spinner).toBeInstanceOf(HTMLElement);
 		});
 	});
+
+	describe('loaded spinner', () => {
+		beforeEach(() => {
+			component.showWhileLoaded = true;
+			fixture.detectChanges();
+		})
+
+		it('should NOT be visible if NOT loaded', () => {
+			const spinner = fixture.nativeElement.querySelector(spinnerSelector);
+
+			expect(spinner).not.toBeInstanceOf(HTMLElement);
+		})
+
+		it('should be visible if loaded', () => {
+			component.showWhileLoaded = true;
+			component.stateResource = { ...createEmptyStateResource(), loaded: true };
+			fixture.detectChanges();
+
+			const spinner = fixture.nativeElement.querySelector(spinnerSelector);
+
+			expect(spinner).toBeInstanceOf(HTMLElement);
+		});
+	});
 });

goofy-client/libs/ui/src/lib/ui/spinner/spinner.component.ts

@@ -6,7 +6,7 @@ import { createEmptyStateResource, StateResource } from '@goofy-client/tech-shar
 	templateUrl: './spinner.component.html',
 	styleUrls: ['./spinner.component.scss']
 })
-export class SpinnerComponent implements OnChanges {
+export class SpinnerComponent {
 
 	@Input() stateResource: StateResource<any> = createEmptyStateResource();
 	@Input() diameter: number = 70;
@@ -14,12 +14,10 @@ export class SpinnerComponent implements OnChanges {
 	@Input() text: string;
 	@Input() showWhileLoaded: boolean;
 
-	showSpinner: boolean;
-
-	ngOnChanges(changes: SimpleChanges) {
-		if (changes.stateResource) {
-			if (this.showWhileLoaded) this.showSpinner = this.stateResource.loaded;
-			else this.showSpinner = this.stateResource.loading;
-		}
+	get showSpinner(): boolean {
+		console.log(this.showWhileLoaded)
+		if (this.showWhileLoaded) return this.stateResource.loaded && this.stateResource.resource;
+		return this.stateResource.loading;
 	}
 }
+

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.html

 <ng-container *ngIf="redirectStateResource$ | async as redirectStateResource">
 
-	<goofy-client-spinner [stateResource]="redirectStateResource" [showWhileLoaded]="true" text="Vorgang wird weitergeleitet">
+	<goofy-client-spinner
+			[stateResource]="redirectStateResource"
+			[showWhileLoaded]="true"
+			padding="0"
+			text="Vorgang wird weitergeleitet">
 		<form class="form" [formGroup]="formService.form" (submit)="submit()">
 
 			<goofy-client-text-editor

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-redirect/vorgang-redirect.component.scss

+:host {
+	width: 100%;
+	max-width: 320px;
+	display: block;
+}
+
 .form {
 	display: flex;
 	flex-direction: column;
-	position: relative;
-	max-width: 320px;
-	width: 100%;
 
 	::ng-deep {
 		mat-form-field {
@@ -12,16 +15,8 @@
 	}
 }
 
-.spinner {
-	display: inline-flex;
-	flex-direction: column;
-	align-items: center;
-
-	.mat-spinner {
-		margin: 8px;
-	}
-
-	p {
-		color: #999;
+goofy-client-spinner {
+	::ng-deep .spinner {
+		text-align: center;
 	}
 }