Loading the initial graph state, either on initial site visit or when switching randomizer branches, takes a few seconds to complete. During this time the UI is choppy or completely frozen.
Additionally, mutating the graph object directly after the useMemo hook completes is technically not supported by React.
A better approach would be to move the graph to a web worker. This gives it a separate thread to use from the main rendering thread. Passing data back and forth can be performed via JSON serialization. SharedArrayBuffers may be something else to explore if serialization is a nonstarter for performance or logistical reasons.
Once the graph is moved, state changes can be refactored to target specific areas instead of re-rendering everything every change. This currently causes small hangups when there are more than 2000 locations visible even on fast machines.
As a stretch item, other frameworks can be explored once the nonstandard Memo usage is removed. Consider Svelte and Solid.
Loading the initial graph state, either on initial site visit or when switching randomizer branches, takes a few seconds to complete. During this time the UI is choppy or completely frozen.
Additionally, mutating the graph object directly after the useMemo hook completes is technically not supported by React.
A better approach would be to move the graph to a web worker. This gives it a separate thread to use from the main rendering thread. Passing data back and forth can be performed via JSON serialization. SharedArrayBuffers may be something else to explore if serialization is a nonstarter for performance or logistical reasons.
Once the graph is moved, state changes can be refactored to target specific areas instead of re-rendering everything every change. This currently causes small hangups when there are more than 2000 locations visible even on fast machines.
As a stretch item, other frameworks can be explored once the nonstandard Memo usage is removed. Consider Svelte and Solid.