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>
  );
}