Node Status Indicator

A node wrapper that has multiple states for indicating the status of a node. Status can be one of the following: "success", "loading", "error" and "initial".

Additionally, the NodeStatusIndicator component supports different loading variants: "border" and "overlay", which can be set using the loadingVariant prop.

• The "border" variant is the default and shows a spinning border around the node when it is in loading state.
• The "overlay" variant shows a full overlay, with an animated spinner on the node when it is in loading state.

npx shadcn@latest add https://ui.reactflow.dev/node-status-indicator

pnpm dlx shadcn@latest add https://ui.reactflow.dev/node-status-indicator

yarn dlx shadcn@latest add https://ui.reactflow.dev/node-status-indicator

bun x shadcn@latest add https://ui.reactflow.dev/node-status-indicator

import { BaseNode, BaseNodeContent } from "@/components/base-node"; import { NodeStatusIndicator } from "@/components/node-status-indicator";   export const LoadingNode = () => {  return (  <NodeStatusIndicator status="loading" variant="border">  <BaseNode>  <BaseNodeContent>This node is loading...</BaseNodeContent>  </BaseNode>  </NodeStatusIndicator>  ); };

import { Background, ReactFlow } from "@xyflow/react";   import { LoadingNode } from "./component-example";   const defaultNodes = [  {  id: "1",  position: { x: 120, y: 160 },  type: "loadingNode",  data: {},  }, ];   const nodeTypes = {  loadingNode: LoadingNode, };   export default function App() {  return (  <div className="h-full w-full">  <ReactFlow defaultNodes={defaultNodes} nodeTypes={nodeTypes} fitView>  <Background />  </ReactFlow>  </div>  ); }