diff --git a/frontend/src/components/nodes/render/RenderingNode.tsx b/frontend/src/components/nodes/render/RenderingNode.tsx index 9104e6b..861ddab 100644 --- a/frontend/src/components/nodes/render/RenderingNode.tsx +++ b/frontend/src/components/nodes/render/RenderingNode.tsx @@ -28,7 +28,7 @@ import { NodeHeaderTitle } from '@/components/graph/NodeHeaderTitle' import { NodeMenubar } from '@/components/graph/NodeMenubar' import { NodeStatusIndicator } from '@/components/graph/NodeStatusIndicator' import { MenubarCheckboxItem, MenubarItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger } from '@/components/ui/menubar' -import { Sparkles, ZoomIn, ZoomOut, RotateCcw, RotateCw, Copy, Play, ChevronDown } from 'lucide-react' +import { Sparkles, ZoomIn, ZoomOut, RotateCcw, RotateCw, Copy, Play, ChevronDown, Loader2 } from 'lucide-react' import { InputHandle } from '@/components/graph/NodeHandles' import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch' import { Input } from '@/components/ui/input' @@ -41,6 +41,7 @@ import { DropdownMenuLabel, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' +import { cn } from '@/lib/utils' import { useTheme } from '@/lib/themeContext' import { toast } from 'sonner' @@ -488,13 +489,22 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) { type="button" size="sm" variant="outline" - className="h-7 gap-1.5 rounded-r-none border-r-0 px-2.5 text-xs" + disabled={loading} + className={cn( + 'h-7 gap-1.5 rounded-r-none border-r-0 px-2.5 text-xs', + effectiveUpdateMode === 'manual' && hasPendingInputs && 'border-l-2 border-l-amber-500 bg-amber-500/10 hover:bg-amber-500/15 dark:bg-amber-500/15 dark:hover:bg-amber-500/20' + )} onClick={(e) => { e.stopPropagation() updateData({ runTrigger: (data?.runTrigger ?? 0) + 1 }) }} + title={effectiveUpdateMode === 'manual' && hasPendingInputs ? 'Inputs changed — click to render' : undefined} > - + {loading ? ( + + ) : ( + + )} Run @@ -503,7 +513,10 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) { type="button" size="sm" variant="outline" - className="h-7 min-w-[4.5rem] gap-1 rounded-l-none pl-2 pr-1.5 text-xs font-normal" + className={cn( + 'h-7 min-w-[4.5rem] gap-1 rounded-l-none pl-2 pr-1.5 text-xs font-normal', + effectiveUpdateMode === 'manual' && hasPendingInputs && 'bg-amber-500/10 hover:bg-amber-500/15 dark:bg-amber-500/15 dark:hover:bg-amber-500/20' + )} aria-label="Update mode" onClick={(e) => e.stopPropagation()} >