added spinner when connecting

Author: smasherprog

src/client/src/app/app.component.css

@@ -3,4 +3,8 @@
     width:200px;
     margin:auto;
     z-index:50;
-}
+}
+.connect-spinner { 
+    width:320px;
+    margin:auto;
+  }

src/client/src/app/app.component.html

@@ -8,3 +8,8 @@
     <monitor-canvas *ngFor="let mon of ClientSettings_.MonitorsToWatch" [Monitor]="mon" #HTMLCanvasScreenImage_></monitor-canvas>
     <canvas #HTMLCanvasMouseImage_ style="position:absolute;"></canvas>
 </div>
+<div *ngIf="Socket_ && this.Socket_.readyState === this.Socket_.CONNECTING">
+    <h1 style="text-align:center;">Connecting to {{ConnectedTo}}</h1>
+    <mat-progress-spinner class="connect-spinner" mode="indeterminate" diameter="32" [value]="50"> </mat-progress-spinner>
+</div>
+

src/client/src/app/app.component.ts

@@ -71,8 +71,8 @@ export class AppComponent implements OnInit {
     public OpenDialog(): void
     {
         this.dialog.open(ConnectDialog, {disableClose : true}).afterClosed().subscribe((a: ConnectModel) => {
-            if (a) {
-                this.Socket_ = new WebSocket(a.Protocol + "://" + a.Host + ":" + a.Port);
+            if (a) {  
+                this.Socket_ = new WebSocket(a.Protocol + "://" + a.Host + ":" + a.Port); 
                 this.Socket_.binaryType = 'arraybuffer';
                 this.ConnectedTo = a.Protocol + "://" + a.Host + ":" + a.Port;
                 this.ClientDriver_ =
@@ -87,6 +87,7 @@ export class AppComponent implements OnInit {
                         .onMessage((ws: WebSocket, message: WSMessage) => { console.log('onMessage length:' + message.data.byteLength); })
                         .onDisconnection((ws: WebSocket, code: number, message: string) => {
                             console.log('onDisconnection ' + code + "  "+ message);
+                            this.ConnectedTo ='';
                             this.Cursor_ = null;
                             this.ScaleImage_ = false;
                             this.Monitors = new Array<Monitor>();

src/client/src/app/material.module.ts

@@ -1,4 +1,4 @@
-import {MatButtonModule, MatCheckboxModule, MatDialogModule, MatInputModule, MatSelectModule, MatSidenavModule, MatListModule} from '@angular/material';
+import {MatButtonModule, MatCheckboxModule, MatDialogModule, MatInputModule, MatSelectModule, MatSidenavModule, MatListModule, MatProgressSpinnerModule} from '@angular/material';
 import { NgModule } from '@angular/core';
 
 @NgModule({
@@ -9,7 +9,8 @@ import { NgModule } from '@angular/core';
     MatInputModule,
     MatSelectModule,
     MatSidenavModule,
-    MatListModule
+    MatListModule,
+    MatProgressSpinnerModule
   ],
   exports: [
     MatButtonModule, 
@@ -18,7 +19,8 @@ import { NgModule } from '@angular/core';
     MatInputModule,
     MatSelectModule,
     MatSidenavModule,
-    MatListModule
+    MatListModule,
+    MatProgressSpinnerModule
   ],
 })
 export class MaterialModule { }