diff --git a/.changeset/early-eggs-lie.md b/.changeset/early-eggs-lie.md new file mode 100644 index 000000000..41bc304ce --- /dev/null +++ b/.changeset/early-eggs-lie.md @@ -0,0 +1,5 @@ +--- +"@stackflow/react": patch +--- + +Attach state tracking instruments to original promise when creating SyncInspectablePromises with Promises diff --git a/integrations/react/src/__internal__/utils/SyncInspectablePromise.ts b/integrations/react/src/__internal__/utils/SyncInspectablePromise.ts index ab2a367b5..1c4847b0d 100644 --- a/integrations/react/src/__internal__/utils/SyncInspectablePromise.ts +++ b/integrations/react/src/__internal__/utils/SyncInspectablePromise.ts @@ -49,10 +49,17 @@ export function inspect( } function makeSyncInspectable( - thenable: PromiseLike, + promise: Promise, ): SyncInspectablePromise { + if ( + "status" in promise && + Object.values(PromiseStatus).some((status) => status === promise.status) + ) { + return promise as SyncInspectablePromise; + } + const syncInspectablePromise: SyncInspectablePromise = Object.assign( - new Promise((resolve) => resolve(thenable)), + promise, { status: PromiseStatus.PENDING }, ); @@ -72,15 +79,9 @@ function makeSyncInspectable( export function resolve(value: T): SyncInspectablePromise> { if (isPromiseLike(value)) { - if ( - value instanceof Promise && - "status" in value && - Object.values(PromiseStatus).some((status) => status === value.status) - ) { - return value as SyncInspectablePromise>; - } - - return makeSyncInspectable(value) as SyncInspectablePromise>; + return makeSyncInspectable( + value instanceof Promise ? value : Promise.resolve(value), + ); } return Object.assign(Promise.resolve(value), { diff --git a/integrations/react/src/future/loader/loaderPlugin.tsx b/integrations/react/src/future/loader/loaderPlugin.tsx index bf85771a8..1de19114a 100644 --- a/integrations/react/src/future/loader/loaderPlugin.tsx +++ b/integrations/react/src/future/loader/loaderPlugin.tsx @@ -57,18 +57,14 @@ export function loaderPlugin< return event; } - const loaderData = loadData(activityName, activityParams); - - if (isPromiseLike(loaderData)) { - Promise.allSettled([loaderData]).then( - ([loaderDataPromiseResult]) => { - printLoaderDataPromiseError({ - promiseResult: loaderDataPromiseResult, - activityName: matchActivity.name, - }); - }, - ); - } + const loaderData = resolve(loadData(activityName, activityParams)); + + Promise.allSettled([loaderData]).then(([loaderDataPromiseResult]) => { + printLoaderDataPromiseError({ + promiseResult: loaderDataPromiseResult, + activityName: matchActivity.name, + }); + }); return { ...event,