fix(react): Attach promise state tracking instruments into original promises in useThenable (#665)

Co-authored-by: anakin_karrot <[email protected]>

Author: ENvironmentSet

.changeset/early-eggs-lie.md

@@ -0,0 +1,5 @@
+---
+"@stackflow/react": patch
+---
+
+Attach state tracking instruments to original promise when creating SyncInspectablePromises with Promises

integrations/react/src/__internal__/utils/SyncInspectablePromise.ts

@@ -49,10 +49,17 @@ export function inspect<T>(
 }
 
 function makeSyncInspectable<T>(
-  thenable: PromiseLike<T>,
+  promise: Promise<T>,
 ): SyncInspectablePromise<T> {
+  if (
+    "status" in promise &&
+    Object.values(PromiseStatus).some((status) => status === promise.status)
+  ) {
+    return promise as SyncInspectablePromise<T>;
+  }
+
   const syncInspectablePromise: SyncInspectablePromise<T> = Object.assign(
-    new Promise<T>((resolve) => resolve(thenable)),
+    promise,
     { status: PromiseStatus.PENDING },
   );
 
@@ -72,15 +79,9 @@ function makeSyncInspectable<T>(
 
 export function resolve<T>(value: T): SyncInspectablePromise<Awaited<T>> {
   if (isPromiseLike(value)) {
-    if (
-      value instanceof Promise &&
-      "status" in value &&
-      Object.values(PromiseStatus).some((status) => status === value.status)
-    ) {
-      return value as SyncInspectablePromise<Awaited<T>>;
-    }
-
-    return makeSyncInspectable(value) as SyncInspectablePromise<Awaited<T>>;
+    return makeSyncInspectable(
+      value instanceof Promise ? value : Promise.resolve(value),
+    );
   }
 
   return Object.assign(Promise.resolve(value), {

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,