Handle loading and disable buttons

- Execute the send() operations without waiting for it, to give user much better UX.

app/src/app/connection.service.ts

@@ -5,6 +5,7 @@ import { Record } from '@web5/api';
 import { RecordEntry } from './data';
 import { connect } from '../../node_modules/undici-types/api.d';
 import { DwnDateSort } from '@web5/agent';
+import { UtilityService } from './utility.service';
 
 export interface ConnectionData {
   did: string;
@@ -25,6 +26,8 @@ export interface ConnectionBlockEntry extends RecordEntry<ConnectionBlockData> {
 export class ConnectionService {
   identity = inject(IdentityService);
 
+  utility = inject(UtilityService);
+
   blocks = signal<ConnectionBlockEntry[]>([]);
 
   connections = signal<ConnectionEntry[]>([]);
@@ -94,16 +97,16 @@ export class ConnectionService {
     } as ConnectionEntry;
   }
 
-  async deleteBlock(entry: any) {
+  async deleteBlock(entry: ConnectionEntry) {
     await entry.record.delete();
-    entry.record.send(this.identity.did);
     this.blocks.update((list) => [...list.filter((n) => n.id !== entry.id)]);
+    this.utility.executeAsyncWithToast(entry.record.send(this.identity.did));
   }
 
   async deleteConnection(entry: any) {
     await entry.record.delete();
-    entry.record.send(this.identity.did);
     this.connections.update((list) => [...list.filter((n) => n.id !== entry.id)]);
+    this.utility.executeAsyncWithToast(entry.record.send(this.identity.did));
   }
 
   async block(did: string) {

app/src/app/data/index.ts

@@ -10,4 +10,5 @@ export interface RecordEntry<T> {
   record: Record;
   id: string;
   data: T;
+  loading?: boolean;
 }

app/src/app/notifications/notifications.component.ts

@@ -55,10 +55,6 @@ export class NotificationsComponent {
   }
 
   async accept(entry: NotificationEvent) {
-    if (entry.loading) {
-      return;
-    }
-
     entry.loading = true;
 
     console.log('Accepting connection request');
@@ -92,10 +88,6 @@ export class NotificationsComponent {
   }
 
   async deleteNotification(entry: NotificationEvent) {
-    if (entry.loading) {
-      return;
-    }
-
     entry.loading = true;
 
     const did = entry.record.author;
@@ -118,10 +110,6 @@ export class NotificationsComponent {
   }
 
   async block(entry: NotificationEvent) {
-    if (entry.loading) {
-      return;
-    }
-
     entry.loading = true;
 
     console.log('Blocking user', entry);

app/src/app/settings/blocks/blocks.component.html

@@ -15,7 +15,7 @@ <h1>Blocks Management</h1>
       </mat-card-content>
       <mat-card-actions>
         <button mat-flat-button [routerLink]="['/profile', entry.data.did]">VIEW PROFILE</button>
-        <button mat-button (click)="deleteBlock(entry)">DELETE</button>
+        <button mat-button (click)="deleteBlock(entry)" [disabled]="entry.loading">DELETE</button>
       </mat-card-actions>
     </mat-card>
     } @empty { No blocks found. }

app/src/app/settings/blocks/blocks.component.ts

@@ -33,6 +33,8 @@ export class BlocksComponent {
   // }
 
   deleteBlock(entry: any) {
+    entry.loading = true;
+
     this.service.deleteBlock(entry);
   }
 }

app/src/app/settings/connections/connections.component.html

@@ -15,7 +15,7 @@ <h1>Connections Management</h1>
       </mat-card-content>
       <mat-card-actions>
         <button mat-flat-button [routerLink]="['/profile', entry.data.did]">VIEW PROFILE</button>
-        <button mat-button (click)="deleteBlock(entry)">DELETE</button>
+        <button mat-button (click)="deleteConnection(entry)" [disabled]="entry.loading">DELETE</button>
       </mat-card-actions>
     </mat-card>
     } @empty { No connections found. }

app/src/app/settings/connections/connections.component.ts

@@ -32,7 +32,9 @@ export class ConnectionsComponent {
   //   this.blocks.set(blocks);
   // }
 
-  deleteBlock(entry: any) {
+  deleteConnection(entry: any) {
+    entry.loading = true;
+
     this.service.deleteConnection(entry);
   }
 }

app/src/app/utility.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UtilityService } from './utility.service';
+
+describe('UtilityService', () => {
+  let service: UtilityService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UtilityService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

app/src/app/utility.service.ts

@@ -0,0 +1,36 @@
+import { inject, Injectable } from '@angular/core';
+import { AppService } from './app.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UtilityService {
+  snackBar = inject(MatSnackBar);
+
+  constructor() {}
+
+  // executeAsyncWithoutWaiting(action: () => Promise<any>) {
+  //   action();
+  // }
+
+  async executeAsyncWithToast(action: Promise<any>, successMessage?: string, errorMessage?: string) {
+    try {
+      await action;
+
+      if (successMessage) {
+        this.openSnackBar(successMessage);
+      }
+    } catch (error) {
+      if (errorMessage) {
+        this.openSnackBar(errorMessage);
+      } else {
+        this.openSnackBar(`Error: ${error}.`);
+      }
+    }
+  }
+
+  openSnackBar(message: string) {
+    this.snackBar.open(message, undefined, { duration: 2000 });
+  }
+}