feat(core,react): pause activity transition for React.Suspense

core/src/activity-utils/makeStackReducer.ts

@@ -11,6 +11,23 @@ import { makeActivitiesReducer } from "./makeActivitiesReducer";
 import { makeActivityReducer } from "./makeActivityReducer";
 import { makeReducer } from "./makeReducer";
 
+function calculateGlobalTransitionState(
+  activities: Activity[],
+  currentState: Stack["globalTransitionState"],
+): Stack["globalTransitionState"] {
+  if (currentState === "paused") {
+    return "paused";
+  }
+
+  const hasActiveTransition = activities.some(
+    (activity) =>
+      activity.transitionState === "enter-active" ||
+      activity.transitionState === "exit-active",
+  );
+
+  return hasActiveTransition ? "loading" : "idle";
+}
+
 function withPauseReducer<T extends DomainEvent>(
   reducer: (stack: Stack, event: T) => Stack,
 ) {
@@ -63,20 +80,25 @@ function withActivitiesReducer<T extends DomainEvent>(
       );
     }
 
-    const isLoading = activities.find(
-      (activity) =>
-        activity.transitionState === "enter-active" ||
-        activity.transitionState === "exit-active",
+    const globalTransitionState = calculateGlobalTransitionState(
+      activities,
+      stack.globalTransitionState,
     );
 
-    const globalTransitionState =
-      stack.globalTransitionState === "paused"
-        ? "paused"
-        : isLoading
-          ? "loading"
-          : "idle";
+    const result = reducer(
+      { ...stack, activities, globalTransitionState },
+      event,
+    );
+
+    const updatedGlobalTransitionState = calculateGlobalTransitionState(
+      result.activities,
+      result.globalTransitionState,
+    );
 
-    return reducer({ ...stack, activities, globalTransitionState }, event);
+    return {
+      ...result,
+      globalTransitionState: updatedGlobalTransitionState,
+    };
   };
 }
 
@@ -123,6 +145,7 @@ export function makeStackReducer(context: {
         return {
           ...stack,
           globalTransitionState: "paused",
+          pausedEvents: stack.pausedEvents ?? [],
         };
       }, context),
     ),

integrations/react/src/__internal__/suspensePlugin.tsx

@@ -0,0 +1,30 @@
+import { Suspense, useEffect } from "react";
+import type { StackflowReactPlugin } from "./StackflowReactPlugin";
+import { useCoreActions } from "./core";
+
+export function suspensePlugin(): StackflowReactPlugin {
+  return () => ({
+    key: "plugin-suspense",
+    wrapActivity: ({ activity }) => {
+      return (
+        <Suspense fallback={<SuspenseFallback />}>{activity.render()}</Suspense>
+      );
+    },
+  });
+}
+
+export function SuspenseFallback() {
+  const { pause, resume } = useCoreActions();
+
+  useEffect(() => {
+    console.log("lets pause");
+    pause();
+
+    return () => {
+      console.log("lets resume");
+      resume();
+    };
+  }, []);
+
+  return null;
+}

integrations/react/src/future/loader/loaderPlugin.tsx

@@ -84,10 +84,7 @@ function createBeforeRouteHandler<
     [activityName in RegisteredActivityName]: ActivityComponentType<any>;
   },
 >(input: StackflowInput<T, R>): OnBeforeRoute {
-  return ({
-    actionParams,
-    actions: { overrideActionParams, pause, resume },
-  }) => {
+  return ({ actionParams, actions: { overrideActionParams } }) => {
     const { activityName, activityParams, activityContext } = actionParams;
 
     const matchActivity = input.config.activities.find(
@@ -106,28 +103,15 @@ function createBeforeRouteHandler<
 
     const loaderDataPromise =
       loaderData instanceof Promise ? loaderData : undefined;
-    const lazyComponentPromise =
-      "_load" in matchActivityComponent
-        ? matchActivityComponent._load?.()
-        : undefined;
 
-    if (loaderDataPromise || lazyComponentPromise) {
-      pause();
-    }
-    Promise.allSettled([loaderDataPromise, lazyComponentPromise])
-      .then(([loaderDataPromiseResult, lazyComponentPromiseResult]) => {
+    Promise.allSettled([loaderDataPromise]).then(
+      ([loaderDataPromiseResult]) => {
         printLoaderDataPromiseError({
           promiseResult: loaderDataPromiseResult,
           activityName: matchActivity.name,
         });
-        printLazyComponentPromiseError({
-          promiseResult: lazyComponentPromiseResult,
-          activityName: matchActivity.name,
-        });
-      })
-      .finally(() => {
-        resume();
-      });
+      },
+    );
 
     overrideActionParams({
       ...actionParams,
@@ -153,18 +137,3 @@ function printLoaderDataPromiseError({
     );
   }
 }
-
-function printLazyComponentPromiseError({
-  promiseResult,
-  activityName,
-}: {
-  promiseResult: PromiseSettledResult<any>;
-  activityName: string;
-}) {
-  if (promiseResult.status === "rejected") {
-    console.error(promiseResult.reason);
-    console.error(
-      `The above error occurred while loading a lazy react component of the "${activityName}" activity`,
-    );
-  }
-}

integrations/react/src/future/stackflow.tsx

@@ -16,6 +16,7 @@ import MainRenderer from "../__internal__/MainRenderer";
 import { makeActivityId } from "../__internal__/activity";
 import { CoreProvider } from "../__internal__/core";
 import { PluginsProvider } from "../__internal__/plugins";
+import { suspensePlugin } from "../__internal__/suspensePlugin";
 import { isBrowser, makeRef } from "../__internal__/utils";
 import type { StackflowReactPlugin } from "../stable";
 import type { Actions } from "./Actions";
@@ -57,11 +58,8 @@ export function stackflow<
     ...(input.plugins ?? [])
       .flat(Number.POSITIVE_INFINITY as 0)
       .map((p) => p as StackflowReactPlugin),
-
-    /**
-     * `loaderPlugin()` must be placed after `historySyncPlugin()`
-     */
     loaderPlugin(input),
+    suspensePlugin(),
   ];
 
   const enoughPastTime = () =>