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
-
+