feat: implement async transitions for flow service operations to enhance performance and user experience

Author: nicosammito

src/components/d-flow-file/DFlowTabDefault.tsx

@@ -31,6 +31,8 @@ export const DFlowTabDefault: React.FC<DFlowTabDefaultProps> = (props) => {
     const {node, flowId, depthLevel, scopeLevel, nodeLevel} = props
     const functionService = useService(DFlowFunctionReactiveService)
     const flowService = useService(DFlowReactiveService)
+    const [, startTransition] = React.useTransition()
+
     const definition = functionService.getById(node.functionDefinition?.id!!)
     const paramDefinitions = React.useMemo(() => {
         const map: Record<string, ParameterDefinitionView> = {}
@@ -56,7 +58,10 @@ export const DFlowTabDefault: React.FC<DFlowTabDefaultProps> = (props) => {
             if (!parameter) return null
 
             const submitValue = (value: NodeFunction | LiteralValue | ReferenceValue | undefined) => {
-                flowService.setParameterValue(flowId, node.id!!, parameter.id!!, value)
+                startTransition(async () => {
+                    await flowService.setParameterValue(flowId, node.id!!, parameter.id!!, value)
+                })
+
             }
 
             const submitValueEvent = (event: any) => {

src/components/d-flow-file/DFlowTabTrigger.tsx

@@ -18,10 +18,14 @@ export interface DFlowTabTriggerProps {
 export const DFlowTabTrigger: React.FC<DFlowTabTriggerProps> = (props) => {
 
     const {instance} = props
+
     const flowTypeService = useService(DFlowTypeReactiveService)
     const flowService = useService(DFlowReactiveService)
+    const [,startTransition] = React.useTransition()
+
     const definition = flowTypeService.getById(instance.type?.id!!)
 
+
     const suggestionsById: Record<string, DFlowSuggestion[]> = {}
     definition?.flowTypeSettings?.forEach(settingDefinition => {
         suggestionsById[settingDefinition.identifier!!] = useSuggestions({dataType: settingDefinition.dataType}, [], instance.id, 0, [0], 0)
@@ -45,11 +49,14 @@ export const DFlowTabTrigger: React.FC<DFlowTabTriggerProps> = (props) => {
             const defaultValue = setting.value?.__typename === "LiteralValue" ? typeof setting?.value == "object" ? JSON.stringify(setting?.value) : setting?.value : typeof setting?.value == "object" ? JSON.stringify(setting?.value) : setting?.value
 
             const submitValue = (value: NodeParameterValue) => {
-                if (value.__typename == "LiteralValue") {
-                    flowService.setSettingValue(props.instance.id, setting.id, value.value)
-                } else {
-                    flowService.setSettingValue(props.instance.id, setting.id, value)
-                }
+                startTransition(async () => {
+                    if (value.__typename == "LiteralValue") {
+                        await flowService.setSettingValue(props.instance.id, setting.id, value.value)
+                    } else {
+                        await flowService.setSettingValue(props.instance.id, setting.id, value)
+                    }
+                })
+
             }
 
             const submitValueEvent = (event: any) => {

src/components/d-flow-function/DFlowFunctionSuggestionCard.tsx

@@ -1,10 +1,9 @@
-import {Code0Component} from "../../utils";
+import {Code0Component, useService} from "../../utils";
 import {Handle, Node, NodeProps, Position} from "@xyflow/react";
 import React, {memo} from "react";
 import {Button} from "../button/Button";
 import {IconPlus} from "@tabler/icons-react";
 import {useSuggestions} from "../d-flow-suggestion/DFlowSuggestion.hook";
-import {useService} from "../../utils";
 import {DFlowReactiveService} from "../d-flow";
 import {DFlowSuggestionMenu} from "../d-flow-suggestion/DFlowSuggestionMenu";
 import type {Flow, NodeFunction} from "@code0-tech/sagittarius-graphql-types";
@@ -19,14 +18,17 @@ export type DFlowFunctionSuggestionCardProps = NodeProps<Node<DFlowFunctionSugge
 
 export const DFlowFunctionSuggestionCard: React.FC<DFlowFunctionSuggestionCardProps> = memo((props) => {
 
+    const [, startTransition] = React.useTransition()
     const result = useSuggestions(undefined, [], props.data.flowId, 0, [0], 0)
     const flowService = useService(DFlowReactiveService)
     const flow = flowService.getById(props.data.flowId)
 
     return <DFlowSuggestionMenu onSuggestionSelect={suggestion => {
-        if (suggestion.value.__typename === "NodeFunction") {
-            flowService.addNextNodeById(flow?.id, props.data.parentFunction?.id ?? null, suggestion.value)
-        }
+        startTransition(async () => {
+            if (suggestion.value.__typename === "NodeFunction") {
+                await flowService.addNextNodeById(flow?.id, props.data.parentFunction?.id ?? null, suggestion.value)
+            }
+        })
     }} suggestions={result} triggerContent={
         <Button paddingSize={"xxs"} variant={"normal"} color={"secondary"}>
             <Handle

src/components/d-flow-panel/DFlowPanelControl.tsx

@@ -26,6 +26,7 @@ export const DFlowPanelControl: React.FC<DFlowPanelControlProps> = (props) => {
     const fileTabsService = useService(FileTabsService)
     const fileTabsStore = useStore(FileTabsService)
     const flowService = useService(DFlowReactiveService)
+    const [, startTransition] = React.useTransition()
 
     //memoized values
     const activeTab = React.useMemo(() => {
@@ -37,15 +38,21 @@ export const DFlowPanelControl: React.FC<DFlowPanelControlProps> = (props) => {
     const deleteActiveNode = React.useCallback(() => {
         if (!activeTab) return
         // @ts-ignore
-        flowService.deleteNodeById((activeTab.content.props.flowId as Flow['id']), (activeTab.content.props.node.id as NodeFunction['id']))
+        startTransition(async () => {
+            await flowService.deleteNodeById((activeTab.content.props.flowId as Flow['id']), (activeTab.content.props.node.id as NodeFunction['id']))
+        })
         fileTabsService.deleteById(activeTab.id)
     }, [activeTab, flowService])
 
     const addNodeToFlow = React.useCallback((suggestion: any) => {
         if (flowId && suggestion.value.__typename === "NodeFunction" && "node" in activeTab.content.props) {
-            flowService.addNextNodeById(flowId, (activeTab.content.props.node.id as NodeFunction['id']) ?? undefined, suggestion.value)
+            startTransition(async () => {
+                await flowService.addNextNodeById(flowId, (activeTab.content.props.node.id as NodeFunction['id']) ?? undefined, suggestion.value)
+            })
         } else {
-            flowService.addNextNodeById(flowId, null, suggestion.value)
+            startTransition(async () => {
+                await flowService.addNextNodeById(flowId, null, suggestion.value)
+            })
         }
     }, [flowId, flowService, activeTab])
 

src/components/d-flow/DFlow.service.ts

@@ -39,19 +39,6 @@ export abstract class DFlowReactiveService extends ReactiveArrayService<Flow> {
         }
     }
 
-    async deleteById(flowId: Flow['id']): Promise<void> {
-        const index = this.values().findIndex(f => f.id === flowId)
-        this.delete(index)
-    }
-
-    async renameById(flowId: Flow['id'], newName: string): Promise<void> {
-        const flow = this.getById(flowId)
-        const index = this.values().findIndex(f => f.id === flowId)
-        if (!flow) return
-        flow.name = newName
-        this.set(index, flow)
-    }
-
     getNodeById(flowId: Flow['id'], nodeId: NodeFunction['id']): NodeFunction | undefined {
         return this.getById(flowId)?.nodes?.nodes?.find(node => node?.id === nodeId)!!
     }