feat: [US-039] - Loading and error states

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-22 23:06:43 -03:00 · 2026-01-22 23:06:43 -03:00 · b9d778b379
parent f1e92ba1a0
commit b9d778b379
5 changed files with 127 additions and 31 deletions
--- a/src/app/editor/[projectId]/FlowchartEditor.tsx
+++ b/src/app/editor/[projectId]/FlowchartEditor.tsx
@ -413,7 +413,7 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
  const [contextMenu, setContextMenu] = useState<ContextMenuState>(null)
  const [conditionEditor, setConditionEditor] = useState<ConditionEditorState>(null)
  const [isSaving, setIsSaving] = useState(false)
-  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null)
+  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error'; action?: { label: string; onClick: () => void } } | null>(null)
  const [importConfirmDialog, setImportConfirmDialog] = useState<{
    pendingData: FlowchartData
  } | null>(null)
@ -425,6 +425,9 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
  // Ref for hidden file input
  const fileInputRef = useRef<HTMLInputElement>(null)

+  // Ref for save function to enable retry without circular dependency
+  const handleSaveRef = useRef<() => void>(() => {})
+
  // Check for saved draft on initial render (lazy initialization)
  const [draftState, setDraftState] = useState<{
    showPrompt: boolean
@ -628,12 +631,19 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
      setToast({ message: 'Project saved successfully', type: 'success' })
    } catch (error) {
      console.error('Failed to save project:', error)
-      setToast({ message: 'Failed to save project. Please try again.', type: 'error' })
+      setToast({
+        message: 'Failed to save project.',
+        type: 'error',
+        action: { label: 'Retry', onClick: () => { setToast(null); handleSaveRef.current() } },
+      })
    } finally {
      setIsSaving(false)
    }
  }, [isSaving, nodes, edges, projectId])

+  // Keep ref updated with latest handleSave
+  handleSaveRef.current = handleSave
+
  const handleExport = useCallback(() => {
    // Convert React Flow state to FlowchartData
    const flowchartData: FlowchartData = {
@ -1184,6 +1194,7 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
          message={toast.message}
          type={toast.type}
          onClose={() => setToast(null)}
+          action={toast.action}
        />
      )}
    </div>
--- a/src/app/editor/[projectId]/loading.tsx
+++ b/src/app/editor/[projectId]/loading.tsx
@ -1,3 +1,5 @@
+import LoadingSpinner from '@/components/LoadingSpinner'
+
 export default function EditorLoading() {
  return (
    <div className="flex h-screen flex-col">
@ -9,31 +11,7 @@ export default function EditorLoading() {
      </header>

      <div className="flex flex-1 items-center justify-center bg-zinc-100 dark:bg-zinc-800">
-        <div className="flex flex-col items-center gap-3">
-          <svg
-            className="h-8 w-8 animate-spin text-blue-500"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            />
-          </svg>
-          <p className="text-sm text-zinc-600 dark:text-zinc-400">
-            Loading editor...
-          </p>
-        </div>
+        <LoadingSpinner size="lg" message="Loading editor..." />
      </div>
    </div>
  )
--- a/src/app/editor/[projectId]/page.tsx
+++ b/src/app/editor/[projectId]/page.tsx
@ -1,5 +1,5 @@
 import { createClient } from '@/lib/supabase/server'
-import { notFound } from 'next/navigation'
+import Link from 'next/link'
 import FlowchartEditor from './FlowchartEditor'
 import type { FlowchartData } from '@/types/flowchart'

@ -27,7 +27,59 @@ export default async function EditorPage({ params }: PageProps) {
    .single()

  if (error || !project) {
-    notFound()
+    return (
+      <div className="flex h-screen flex-col">
+        <header className="flex items-center border-b border-zinc-200 bg-white px-4 py-3 dark:border-zinc-700 dark:bg-zinc-900">
+          <Link
+            href="/dashboard"
+            className="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50"
+            aria-label="Back to dashboard"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </Link>
+        </header>
+        <div className="flex flex-1 items-center justify-center bg-zinc-100 dark:bg-zinc-800">
+          <div className="flex flex-col items-center gap-4 text-center">
+            <svg
+              className="h-12 w-12 text-red-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+              />
+            </svg>
+            <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
+              Project Not Found
+            </h2>
+            <p className="max-w-sm text-sm text-zinc-600 dark:text-zinc-400">
+              The project you&apos;re looking for doesn&apos;t exist or you don&apos;t have access to it.
+            </p>
+            <Link
+              href="/dashboard"
+              className="mt-2 rounded-md bg-blue-500 px-4 py-2 text-sm font-medium text-white hover:bg-blue-600"
+            >
+              Back to Dashboard
+            </Link>
+          </div>
+        </div>
+      </div>
+    )
  }

  const flowchartData = (project.flowchart_data || {
--- a/src/components/LoadingSpinner.tsx
+++ b/src/components/LoadingSpinner.tsx
@ -0,0 +1,40 @@
+type LoadingSpinnerProps = {
+  size?: 'sm' | 'md' | 'lg'
+  message?: string
+}
+
+const sizeClasses = {
+  sm: 'h-4 w-4',
+  md: 'h-8 w-8',
+  lg: 'h-12 w-12',
+}
+
+export default function LoadingSpinner({ size = 'md', message }: LoadingSpinnerProps) {
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <svg
+        className={`animate-spin text-blue-500 ${sizeClasses[size]}`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        />
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+      {message && (
+        <p className="text-sm text-zinc-600 dark:text-zinc-400">{message}</p>
+      )}
+    </div>
+  )
+}
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@ -6,16 +6,23 @@ interface ToastProps {
  message: string
  type: 'success' | 'error'
  onClose: () => void
+  action?: {
+    label: string
+    onClick: () => void
+  }
 }

-export default function Toast({ message, type, onClose }: ToastProps) {
+export default function Toast({ message, type, onClose, action }: ToastProps) {
  useEffect(() => {
+    // Don't auto-dismiss if there's an action button
+    if (action) return
+
    const timer = setTimeout(() => {
      onClose()
    }, 3000)

    return () => clearTimeout(timer)
-  }, [onClose])
+  }, [onClose, action])

  const bgColor =
    type === 'success'
@ -60,6 +67,14 @@ export default function Toast({ message, type, onClose }: ToastProps) {
      >
        {icon}
        <span>{message}</span>
+        {action && (
+          <button
+            onClick={action.onClick}
+            className="ml-2 rounded bg-white/20 px-2 py-0.5 text-xs font-semibold hover:bg-white/30"
+          >
+            {action.label}
+          </button>
+        )}
        <button
          onClick={onClose}
          className="ml-2 rounded p-0.5 hover:bg-white/20"