Add a loading screen

block-core · Jul 2, 2024 · 3766a12 · 3766a12
1 parent 481d3bd
commit 3766a12
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 6 deletions.
diff --git a/app/src/app/app.component.css b/app/src/app/app.component.css
@@ -9,7 +9,35 @@
     top: 0;
     right: 0;
     bottom: 0;
-    z-index: 10000;
+    z-index: 1000;
     display: flex;
     justify-content: center;
+}
+
+.loading-container {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    color: var(--mat-app-text-color);
+    padding: 2em;
+    position: absolute;
+    box-sizing: border-box;
+    width: 100%;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1001;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.loading-logo {
+    max-width: 256px;
+    margin: 2em;
+}
+
+mat-spinner {
+    margin: 2em;
 }
diff --git a/app/src/app/app.component.html b/app/src/app/app.component.html
@@ -3,6 +3,20 @@
     <app-unlock></app-unlock>
   </div>
 }
+@if (!appService.initialized()) {
+  <div class="loading-container">
+    <img class="loading-logo" src="ariton-icon-dark.svg">
+
+    @if(appService.firstTime()) {
+      <div>Creating your account... please wait...</div>
+    }
+    @else {
+      <div>Loading your account... please wait...</div>
+    }
+
+    <mat-spinner></mat-spinner>
+  </div>
+}
 <app-layout>
   <router-outlet />
 </app-layout>
diff --git a/app/src/app/app.component.ts b/app/src/app/app.component.ts
@@ -6,18 +6,19 @@ import { LayoutService } from './layout.service';
 import { IdentityService } from './identity.service';
 import { UnlockComponent } from './account/unlock/unlock.component';
 import { AppService } from './app.service';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, LayoutComponent, UnlockComponent],
+  imports: [MatProgressSpinnerModule, RouterOutlet, LayoutComponent, UnlockComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
   title = 'app';
-  private appService = inject(AppService);
+  appService = inject(AppService);
 
   constructor(private router: Router, private layout: LayoutService, public identityService: IdentityService) {
     this.router.events.subscribe(event => {
@@ -37,7 +38,14 @@ export class AppComponent {
     });
   }
 
-  ngOnInit() {
-    this.appService.initialize();
+  async ngOnInit() {
+    await this.appService.initialize();
+
+    console.log('App initialized!', this.appService.firstTime());
+
+    if (this.appService.firstTime()) {
+      console.log('First time setup, redirect to introduction!');
+      this.router.navigate(['/introduction']);
+    }
   }
 }
diff --git a/app/src/app/app.service.ts b/app/src/app/app.service.ts
@@ -33,6 +33,8 @@ export class AppService {
 
   accounts = signal<Account[]>([]);
 
+  firstTime = signal<boolean>(false);
+
   constructor() { }
 
   //getState() { 
@@ -52,6 +54,8 @@ export class AppService {
       state = {
         selectedAccount: ''
       };
+
+      this.firstTime.set(true);
     }
 
     let accounts = this.storage.read('accounts') as any[];

diff --git a/app/src/app/introduction/introduction.component.html b/app/src/app/introduction/introduction.component.html
@@ -17,7 +17,7 @@ <h1>Welcome</h1>
 
   <p>
     <button mat-stroked-button [routerLink]="['/communities']">Skip and jump into the app</button>
-    <button mat-flat-button [routerLink]="['/account/password']">Set a secure password</button>
+    <button mat-flat-button [routerLink]="['/account/password']">Set a password</button>
     <button mat-flat-button [routerLink]="['/account/backup']">Backup your account</button>
     <button mat-flat-button color="warn" (click)="wipe()">Reset (Wipe) Data</button>