dtoro/zui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

performance

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-09 15:50:11 +01:00
parent 50d34bfb00
commit 88629e6dcc
3 changed files with 70 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/App.tsx
View File

@@ -8,6 +8,8 @@ import {
addEdge,
applyNodeChanges,
applyEdgeChanges,
useNodesInitialized,
useReactFlow,
type Node,
type Edge,
type Connection,
@@ -107,6 +109,18 @@ const PROJECT_VERSION = 1
export type ProjectMessage = { type: 'success' | 'error'; text: string }
/** Calls fitView when nodes are initialized (e.g. after load/import). Must be rendered inside ReactFlowProvider. */
function FlowFitViewOnLoad() {
const nodesInitialized = useNodesInitialized()
const { fitView } = useReactFlow()
React.useEffect(() => {
if (nodesInitialized) {
fitView?.({ duration: 200 })
}
}, [nodesInitialized, fitView])
return null
}
export default function App() {
const { theme } = useTheme()
const {
@@ -488,6 +502,7 @@ export default function App() {
</div>
)}
<ReactFlowProvider initialNodes={nodes} initialEdges={edges} fitView>
<FlowFitViewOnLoad />
<ReactFlow
nodes={nodes}
edges={edges}
@@ -508,6 +523,9 @@ export default function App() {
fitView
onInit={onInit}
nodeDragThreshold={1}
nodesDraggable
nodesConnectable
elementsSelectable
>
<Background variant="dots" gap={20} />
<Controls />

27
src/components/nodes/RenderingNode.tsx
View File

@@ -20,10 +20,11 @@ import { NodeHeaderTitle } from '../base/NodeHeaderTitle'
import { NodeMenubar } from '../base/NodeMenubar'
import { NodeStatusIndicator } from '../base/NodeStatusIndicator'
import { MenubarItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger } from '../ui/menubar'
import { Sparkles, ZoomIn, ZoomOut, RotateCcw } from 'lucide-react'
import { Sparkles, ZoomIn, ZoomOut, RotateCcw, RotateCw } from 'lucide-react'
import { InputHandle } from '../base/NodeHandles'
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'
import { Input } from '../ui/input'
import { Button } from '../ui/button'
export type RenderingNodeData = {
viewportWidth?: number
@@ -39,6 +40,7 @@ function RenderingNodeComponent({ id, data, width, height }: Props) {
const [renderedContent, setRenderedContent] = useState<string | null>(null)
const [error, setError] = useState<null | { kind: string; message: string }>(null)
const [loading, setLoading] = useState(false)
const [retryCount, setRetryCount] = useState(0)
const runIdRef = useRef(0)
const loadingStartedAtRef = useRef<number | null>(null)
const minLoadingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -151,6 +153,8 @@ function RenderingNodeComponent({ id, data, width, height }: Props) {
[nodes, connectedNodeIds]
)
const RENDER_DEBOUNCE_MS = 250
useEffect(() => {
if (!sourceContent && incomingIds.length > 0) {
setRenderedContent(null)
@@ -473,16 +477,17 @@ function RenderingNodeComponent({ id, data, width, height }: Props) {
}
}
run()
const debounceTimer = setTimeout(run, RENDER_DEBOUNCE_MS)
return () => {
cancelled = true
clearTimeout(debounceTimer)
if (minLoadingTimeoutRef.current != null) {
clearTimeout(minLoadingTimeoutRef.current)
minLoadingTimeoutRef.current = null
}
}
// Only re-run when inputs that affect the resolved output change (signatures + source).
}, [id, sourceContent, configTypeId, configSignature, edgesSignature, variablesSignature, functionsSignature, viewportWidth, viewportHeight])
// Only re-run when inputs that affect the resolved output change (signatures + source). Debounced to avoid excessive re-renders while typing. retryCount triggers re-run on Retry.
}, [id, sourceContent, configTypeId, configSignature, edgesSignature, variablesSignature, functionsSignature, viewportWidth, viewportHeight, retryCount])
const dimensions =
width != null && height != null && width > 0 && height > 0
@@ -646,7 +651,19 @@ function RenderingNodeComponent({ id, data, width, height }: Props) {
) : srcData?.errorHtml ? (
<div className="p-3 text-xs text-red-700 dark:text-red-400" dangerouslySetInnerHTML={{ __html: String(srcData.errorHtml) }} />
) : (
<div className="p-3 text-xs text-red-700 dark:text-red-400">{error.message}</div>
<div className="flex flex-col gap-2 p-3">
<p className="text-xs text-red-700 dark:text-red-400">{error.message}</p>
<Button
type="button"
variant="outline"
size="sm"
className="w-fit"
onClick={() => setRetryCount((c) => c + 1)}
>
<RotateCw className="size-3 mr-1" />
Retry
</Button>
</div>
)
) : loading ? (
<div className="flex min-h-0 flex-1 items-center justify-center text-xs text-muted-foreground">Rendering…</div>

39
src/lib/configTypes.ts
View File

@@ -33,6 +33,7 @@ export type ConfigType = {
}
const KROKI_PLANTUML_SVG = '/api/kroki/plantuml/svg'
const KROKI_TIMEOUT_MS = 15000
const PLANTUML_INSERT_BLOCKS: InsertBlockOrGroup[] = [
{ label: 'Diagram start/end', snippet: '@startuml\n\n@enduml' },
@@ -131,16 +132,36 @@ export const CONFIG_TYPES: ConfigType[] = [
language: 'plantuml',
insertBlocks: PLANTUML_INSERT_BLOCKS,
render: async (content: string) => {
const res = await fetch(KROKI_PLANTUML_SVG, {
method: 'POST',
headers: { 'Content-Type': 'text/plain' },
body: content,
})
if (!res.ok) {
const err = await res.text()
throw new Error(res.status === 400 ? err || 'Invalid PlantUML' : `Kroki error: ${res.status}`)
const controller = new AbortController()
const timeoutId = setTimeout(() => controller.abort(), KROKI_TIMEOUT_MS)
try {
const res = await fetch(KROKI_PLANTUML_SVG, {
method: 'POST',
headers: { 'Content-Type': 'text/plain' },
body: content,
signal: controller.signal,
})
clearTimeout(timeoutId)
if (!res.ok) {
const err = await res.text()
if (res.status >= 500) {
throw new Error('Diagram service unavailable. Try again later.')
}
throw new Error(res.status === 400 ? err || 'Invalid PlantUML' : `Kroki error: ${res.status}`)
}
return res.text()
} catch (err: unknown) {
clearTimeout(timeoutId)
if (err instanceof Error) {
if (err.name === 'AbortError') {
throw new Error('Diagram request timed out. The service may be slow or unavailable.')
}
if (err.message.includes('fetch') || err.message.includes('network') || err.message.includes('Failed to fetch')) {
throw new Error('Diagram service unavailable. Check your connection or try again later.')
}
}
throw err
}
return res.text()
},
},
{