Fix UI not refreshing on delete decision (#40)

* fix(workspace): resolve loading/spinning issue on workspace creation

* Fix UI not refreshing on delete decision and add error handling

Author: yashrastogi

src/app/components/decision-list/decision-list.component.css

@@ -129,3 +129,45 @@
     padding: 2px 6px;
     border-radius: 4px;
 }
+
+.error-banner {
+    background-color: #fee2e2;
+    color: #b91c1c;
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    border: 1px solid #fecaca;
+    font-size: 14px;
+}
+
+.empty-state {
+    padding: 48px;
+    text-align: center;
+    background: #f9f9f9;
+    border-radius: 12px;
+    border: 2px dashed #e5e5e5;
+    color: #666;
+}
+
+.loading-state {
+    padding: 40px;
+    text-align: center;
+    color: #666;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.spinner {
+    width: 24px;
+    height: 24px;
+    border: 2px solid #e5e5e5;
+    border-top-color: #0a0a0a;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}

src/app/components/decision-list/decision-list.component.html

@@ -7,6 +7,14 @@ <h2>Decisions</h2>
         </div>
     </div>
 
+    <div *ngIf="error" class="error-banner">
+        {{ error }}
+    </div>
+
+    <div *ngIf="!(decisions$ | async) && !error" class="loading-state">
+        <span class="spinner"></span> Loading decisions...
+    </div>
+
     <div class="decision-list" *ngIf="decisions$ | async as decisions">
         <div *ngIf="decisions.length === 0" class="empty-state">
             No decisions found. Create one to get started!

src/app/components/decision-list/decision-list.component.ts

@@ -1,9 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { Decision } from '../../models/decision.model';
 import { DecisionService } from '../../services/decision.service';
-import { Observable } from 'rxjs';
+import { Observable, Subject, takeUntil, startWith, switchMap, catchError, of } from 'rxjs';
 
 @Component({
     selector: 'app-decision-list',
@@ -12,8 +12,11 @@ import { Observable } from 'rxjs';
     templateUrl: './decision-list.component.html',
     styleUrls: ['./decision-list.component.css']
 })
-export class DecisionListComponent implements OnInit {
+export class DecisionListComponent implements OnInit, OnDestroy {
     decisions$: Observable<Decision[]> | undefined;
+    error: string | null = null;
+    private refresh$ = new Subject<void>();
+    private destroy$ = new Subject<void>();
     private workspaceId: string | null = null;
 
     constructor(
@@ -24,15 +27,37 @@ export class DecisionListComponent implements OnInit {
     ngOnInit(): void {
         this.workspaceId = this.getWorkspaceIdFromRoute();
         if (this.workspaceId) {
-            this.decisions$ = this.decisionService.getDecisions(this.workspaceId);
+            this.decisions$ = this.refresh$.pipe(
+                startWith(undefined),
+                switchMap(() => this.decisionService.getDecisions(this.workspaceId!).pipe(
+                    catchError(err => {
+                        this.error = 'Failed to load decisions. Please try again.';
+                        return of([]);
+                    })
+                ))
+            );
         }
     }
 
+    ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+
     deleteDecision(id: string): void {
         if (confirm('Are you sure you want to delete this decision?') && this.workspaceId) {
-            this.decisionService.deleteDecision(this.workspaceId, id).subscribe(() => {
-                this.decisions$ = this.decisionService.getDecisions(this.workspaceId!);
-            });
+            this.error = null;
+            this.decisionService.deleteDecision(this.workspaceId, id)
+                .pipe(takeUntil(this.destroy$))
+                .subscribe({
+                    next: () => {
+                        this.refresh$.next();
+                    },
+                    error: (err) => {
+                        console.error('Delete failed', err);
+                        this.error = 'Failed to delete decision. Please try again.';
+                    }
+                });
         }
     }