diff --git a/app/src/app/app.component.css b/app/src/app/app.component.css index aefe2b09..f6a544c1 100644 --- 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; } \ No newline at end of file diff --git a/app/src/app/app.component.html b/app/src/app/app.component.html index 962eadb6..dca8b2ee 100644 --- a/app/src/app/app.component.html +++ b/app/src/app/app.component.html @@ -3,6 +3,20 @@ } +@if (!appService.initialized()) { +
+ + + @if(appService.firstTime()) { +
Creating your account... please wait...
+ } + @else { +
Loading your account... please wait...
+ } + + +
+} diff --git a/app/src/app/app.component.ts b/app/src/app/app.component.ts index 191f8f85..2ddd758f 100644 --- 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 index 02cbe3d4..c094a835 100644 --- a/app/src/app/app.service.ts +++ b/app/src/app/app.service.ts @@ -33,6 +33,8 @@ export class AppService { accounts = signal([]); + firstTime = signal(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 index 987e8d3c..41c96433 100644 --- a/app/src/app/introduction/introduction.component.html +++ b/app/src/app/introduction/introduction.component.html @@ -17,7 +17,7 @@

Welcome

- +