diff --git a/src/ui/components/NodePickerContext.tsx b/src/ui/components/NodePickerContext.tsx index d048f963a8b..b3dcb02adb4 100644 --- a/src/ui/components/NodePickerContext.tsx +++ b/src/ui/components/NodePickerContext.tsx @@ -1,4 +1,4 @@ -import { ObjectId, PauseId } from "@replayio/protocol"; +import { NodeBounds, ObjectId, PauseId } from "@replayio/protocol"; import { PropsWithChildren, createContext, @@ -153,7 +153,7 @@ export function NodePickerContextRoot({ children }: PropsWithChildren<{}>) { } // Start loading rects eagerly; we'll need them in the hover/click handlers - const boundingRectsPromise = boundingRectsCache.readAsync(replayClient, pauseId); + boundingRectsCache.prefetch(replayClient, pauseId); const { limitToNodeIds, onSelected } = options; @@ -162,10 +162,18 @@ export function NodePickerContextRoot({ children }: PropsWithChildren<{}>) { if (position != null) { const { x, y } = position; - const boundingRects = await boundingRectsPromise; - const nodeBounds = getMouseTarget(boundingRects, x, y, limitToNodeIds); - - return nodeBounds?.node ?? null; + try { + const boundingRects = await boundingRectsCache.readAsync(replayClient, pauseId); + const nodeBounds = getMouseTarget(boundingRects, x, y, limitToNodeIds); + + return nodeBounds?.node ?? null; + } catch { + setState({ + status: "error", + options, + }); + return null; + } } return null;