8000 Node Status Indicator Revamp by 0x0f0f0f · Pull Request #916 · xyflow/web · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Node Status Indicator Revamp #916

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: component-revamp
Choose a base branch
from
Open

Node Status Indicator Revamp #916

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d6c1d9a
add loading spinner and revamp indicator
0x0f0f0f Jul 1, 2025
777c849
cleanup
0x0f0f0f Jul 1, 2025
2231655
further cleanup and docs improvement
0x0f0f0f Jul 1, 2025
eaf5de3
Merge branch 'component-revamp' into status-indicator-revamp
0x0f0f0f Jul 1, 2025
a617244
Merge branch 'component-revamp' into status-indicator-revamp
0x0f0f0f Jul 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 31 additions & 5 deletions apps/ui-components/registry/components/node-status-indicator/app-example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,44 @@
import { Background, ReactFlow } from "@xyflow/react";

import NodeStatusIndicatorDemo from "./component-example";
import {
LoadingNode,
SuccessNode,
ErrorNode,
8000 LoadingNodeOverlay,
} from "./component-example";

const defaultNodes = [
{
id: "1",
position: { x: 200, y: 200 },
data: { label: "Node" },
type: "nodeStatusIndicatorDemo",
position: { x: 0, y: 0 },
type: "loadingNode",
data: {},
},
{
id: "2",
position: { x: 200, y: 0 },
type: "successNode",
data: {},
},
{
id: "3",
position: { x: 60, y: 80 },
type: "errorNode",
data: {},
},
{
id: "4",
position: { x: 120, y: 160 },
type: "loadingNodeOverlay",
data: {},
},
];

const nodeTypes = {
nodeStatusIndicatorDemo: NodeStatusIndicatorDemo,
loadingNode: LoadingNode,
loadingNodeOverlay: LoadingNodeOverlay,
successNode: SuccessNode,
errorNode: ErrorNode,
};

export default function App() {
Expand Down
44 changes: 39 additions & 5 deletions apps/ui-components/registry/components/node-status-indicator/component-example.tsx
View file
Open in desktop
8000
Original file line number Diff line number Diff line change
@@ -1,14 +1,48 @@
import { BaseNode, BaseNodeContent } from "@/registry/components/base-node";
import { NodeStatusIndicator } from "@/registry/components/node-status-indicator";
import { BaseNode } from "@/registry/components/base-node";

const NodeStatusIndicatorDemo = () => {
export const LoadingNode = () => {
return (
<>
<NodeStatusIndicator status="loading">
<BaseNode>Demo Node</BaseNode>
<NodeStatusIndicator status="loading" loadingVariant="border">
<BaseNode>
<BaseNodeContent>This node is loading</BaseNodeContent>
</BaseNode>
</NodeStatusIndicator>
</>
);
};

export default NodeStatusIndicatorDemo;
export const LoadingNodeOverlay = () => {
return (
<NodeStatusIndicator status="loading" loadingVariant="overlay">
<BaseNode>
<BaseNodeContent>Node Loading...</BaseNodeContent>
</BaseNode>
</NodeStatusIndicator>
);
};

export const SuccessNode = () => {
return (
<>
<NodeStatusIndicator status="success">
<BaseNode>
<BaseNodeContent>This node is successful</BaseNodeContent>
</BaseNode>
</NodeStatusIndicator>
</>
);
};

export const ErrorNode = () => {
return (
<>
<NodeStatusIndicator status="error">
<BaseNode>
<BaseNodeContent>This node has encountered an error</BaseNodeContent>
</BaseNode>
</NodeStatusIndicator>
</>
);
};
42 changes: 38 additions & 4 deletions apps/ui-components/registry/components/node-status-indicator/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,41 @@
import React, { ReactNode } from "react";
import clsx from "clsx";
import { LoaderCircle } from "lucide-react";
import { ReactNode } from "react";

export type NodeStatus = "loading" | "success" | "error" | "initial";

export type NodeStatusLoadingVariant = "overlay" | "border";

export type NodeStatusIndicatorProps = {
status?: "loading" | "success" | "error" | "initial";
status?: NodeStatus;
loadingVariant?: NodeStatusLoadingVariant;
children: ReactNode;
};

export const LoadingIndicator = ({ children }: { children: ReactNode }) => {
export const SpinnerLoadingIndicator = ({
children,
}: {
children: ReactNode;
}) => {
return (
<div className="relative">
<StatusBorder className="border-blue-700/40">{children}</StatusBorder>

<div className="absolute inset-0 z-50 rounded-[7px] bg-background/50 backdrop-blur-sm" />
<div className="absolute inset-0 z-50">
<span className="absolute left-[calc(50%-1.25rem)] top-[calc(50%-1.25rem)] inline-block h-10 w-10 animate-ping rounded-full bg-blue-700/20" />

<LoaderCircle className="absolute left-[calc(50%)] top-[calc(50%)] size-6 animate-spin text-blue-700" />
</div>
</div>
);
};

export const BorderLoadingIndicator = ({
children,
}: {
children: ReactNode;
}) => {
return (
<>
<div className="absolute -left-[1px] -top-[1px] h-[calc(100%+2px)] w-[calc(100%+2px)]">
Expand Down Expand Up @@ -58,11 +87,16 @@ const StatusBorder = ({

export const NodeStatusIndicator = ({
status,
loadingVariant = "border",
children,
}: NodeStatusIndicatorProps) => {
switch (status) {
case "loading":
return <LoadingIndicator>{children}</LoadingIndicator>;
return loadingVariant === "border" ? (
<BorderLoadingIndicator>{children}</BorderLoadingIndicator>
) : (
<SpinnerLoadingIndicator>{children}</SpinnerLoadingIndicator>
);
case "success":
return (
<StatusBorder className="border-emerald-600">{children}</StatusBorder>
Expand Down
6 changes: 5 additions & 1 deletion sites/reactflow.dev/src/content/components/nodes/node-status-indicator.mdx
7F31
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import UiComponentViewer from '@/components/ui-component-viewer.mdx';

# 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`.
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.

<UiComponentViewer id="node-status-indicator" />
0