prd.json

@@ -692,7 +692,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 39,
-      "passes": false,
+      "passes": true,
       "notes": ""
     }
   ]

progress.txt

@@ -24,6 +24,8 @@
 - Register custom node types in nodeTypes object (memoized with useMemo) and pass to ReactFlow component
 - FlowchartEditor uses ReactFlowProvider wrapper + inner component pattern for useReactFlow() hook access
 - Use nanoid for generating unique node IDs (import from 'nanoid')
+- Reusable LoadingSpinner component in `src/components/LoadingSpinner.tsx` with size ('sm'|'md'|'lg') and optional message
+- Toast component supports an optional `action` prop: `{ label: string; onClick: () => void }` for retry/undo buttons
 
 ---
 
@@ -567,3 +569,20 @@
   - Navigation warning modal shows "Leave Page" (red) and "Stay" buttons for clear user action
   - "(unsaved changes)" indicator shown next to project name when isDirty is true
 ---
+
+## 2026-01-22 - US-039
+- What was implemented: Loading and error states with reusable spinner, error page, and toast retry
+- Files changed:
+  - src/components/LoadingSpinner.tsx - new reusable loading spinner component with size variants and optional message
+  - src/app/editor/[projectId]/loading.tsx - updated to use LoadingSpinner component
+  - src/app/editor/[projectId]/page.tsx - replaced notFound() with custom error UI showing "Project Not Found" with back to dashboard link
+  - src/components/Toast.tsx - added optional action prop for action buttons (e.g., retry)
+  - src/app/editor/[projectId]/FlowchartEditor.tsx - updated toast state type to include action, save error now shows retry button via handleSaveRef pattern
+- **Learnings for future iterations:**
+  - Use a ref (handleSaveRef) to break circular dependency when a useCallback needs to reference itself for retry logic
+  - Toast action prop uses `{ label: string; onClick: () => void }` for flexible action buttons
+  - Don't auto-dismiss toasts that have action buttons (users need time to click them)
+  - Replace `notFound()` with inline error UI when you need custom styling and navigation links
+  - LoadingSpinner uses size prop ('sm' | 'md' | 'lg') for flexibility across different contexts
+  - Link component from next/link is needed in server components for navigation (no useRouter in server components)
+---