jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Added loading screen on reactflow

Browse source
This commit is contained in:
Lucas Oliveira 2023-12-04 15:32:35 -03:00
commit a632fc6bdb
1 changed files with 17 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -25,6 +25,7 @@ import ReactFlow, {
} from "reactflow"; } from "reactflow";
import GenericNode from "../../../../CustomNodes/GenericNode"; import GenericNode from "../../../../CustomNodes/GenericNode";
import Chat from "../../../../components/chatComponent"; import Chat from "../../../../components/chatComponent";
import Loading from "../../../../components/ui/loading";
import { alertContext } from "../../../../contexts/alertContext"; import { alertContext } from "../../../../contexts/alertContext";
import { FlowsContext } from "../../../../contexts/flowsContext"; import { FlowsContext } from "../../../../contexts/flowsContext";
import { locationContext } from "../../../../contexts/locationContext"; import { locationContext } from "../../../../contexts/locationContext";
@ -40,7 +41,7 @@ import {
scapeJSONParse, scapeJSONParse,
validateSelection, validateSelection,
} from "../../../../utils/reactflowUtils"; } from "../../../../utils/reactflowUtils";
import { getRandomName, isWrappedWithClass } from "../../../../utils/utils"; import { cn, getRandomName, isWrappedWithClass } from "../../../../utils/utils";
import ConnectionLineComponent from "../ConnectionLineComponent"; import ConnectionLineComponent from "../ConnectionLineComponent";
import SelectionMenu from "../SelectionMenuComponent"; import SelectionMenu from "../SelectionMenuComponent";
import ExtraSidebar from "../extraSidebarComponent"; import ExtraSidebar from "../extraSidebarComponent";
@ -163,10 +164,17 @@ export default function Page({
const { setViewport } = useReactFlow(); const { setViewport } = useReactFlow();
const edgeUpdateSuccessful = useRef(true); const edgeUpdateSuccessful = useRef(true);
const [loading, setLoading] = useState(true);
//update flow when tabs change //update flow when tabs change
useEffect(() => { useEffect(() => {
setLoading(true);
setNodes(flow?.data?.nodes ?? []); setNodes(flow?.data?.nodes ?? []);
setEdges(flow?.data?.edges ?? []); setEdges(flow?.data?.edges ?? []);
setViewport(flow?.data?.viewport ?? { zoom: 1, x: 0, y: 0 });
setTimeout(() => {
setLoading(false);
}, 300); // Timeout to prevent ReactFlow to appear before viewport is set. Can't make it async because setViewport is not an async function.
}, [flow, reactFlowInstance]); }, [flow, reactFlowInstance]);
useEffect(() => { useEffect(() => {
@ -187,15 +195,6 @@ export default function Page({
}; };
}, []); }, []);
//remove this if you dont want to see the whole flow on fork
useEffect(() => {
setTimeout(() => {
flow?.data!.nodes!.length > 3
? reactFlowInstance?.fitView({ padding: 0.1 })
: reactFlowInstance?.fitView({ padding: 0.5 });
}, 200);
}, []);
const onEdgesChangeMod = useCallback( const onEdgesChangeMod = useCallback(
(change: EdgeChange[]) => { (change: EdgeChange[]) => {
updateFlow({ updateFlow({
@ -439,6 +438,14 @@ export default function Page({
{Object.keys(templates).length > 0 && {Object.keys(templates).length > 0 &&
Object.keys(types).length > 0 ? ( Object.keys(types).length > 0 ? (
<div id="react-flow-id" className="h-full w-full"> <div id="react-flow-id" className="h-full w-full">
<div
className={cn(
"relative flex h-full w-full items-center justify-center bg-background",
!loading ? "hidden" : ""
)}
>
<Loading />
</div>
<ReactFlow <ReactFlow
nodes={nodes} nodes={nodes}
onMove={() => { onMove={() => {