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

core/src/activity-utils/findTargetActivityIndices.ts

@@ -105,6 +105,30 @@ export function findTargetActivityIndices(
 
       break;
     }
+    case "Paused": {
+      const affectedActivities = activities.filter(
+        (activity) =>
+          (activity.transitionState === "enter-active" ||
+            activity.transitionState === "enter-done") &&
+          event.eventDate - activity.enteredBy.eventDate <=
+            context.transitionDuration,
+      );
+
+      targetActivities.push(
+        ...affectedActivities.map((activity) => activities.indexOf(activity)),
+      );
+      break;
+    }
+    case "Resumed": {
+      const affectedActivities = activities.filter(
+        (activity) => activity.transitionState === "enter-active",
+      );
+
+      targetActivities.push(
+        ...affectedActivities.map((activity) => activities.indexOf(activity)),
+      );
+      break;
+    }
     default:
       break;
   }

core/src/activity-utils/makeActivityReducer.ts

@@ -1,8 +1,10 @@
 import type { Activity, ActivityTransitionState } from "../Stack";
 import type {
   DomainEvent,
+  PausedEvent,
   PoppedEvent,
   ReplacedEvent,
+  ResumedEvent,
   StepPoppedEvent,
   StepPushedEvent,
   StepReplacedEvent,
@@ -124,7 +126,24 @@ export function makeActivityReducer(context: {
     Initialized: noop,
     ActivityRegistered: noop,
     Pushed: noop,
-    Paused: noop,
-    Resumed: noop,
+    Paused: (activity: Activity, event: PausedEvent): Activity => {
+      return {
+        ...activity,
+        transitionState: "enter-active",
+      };
+    },
+    Resumed: (activity: Activity, event: ResumedEvent): Activity => {
+      const isTransitionDone =
+        context.now - event.eventDate >= context.transitionDuration;
+
+      const transitionState: ActivityTransitionState = isTransitionDone
+        ? "enter-done"
+        : "enter-active";
+
+      return {
+        ...activity,
+        transitionState,
+      };
+    },
   } as const);
 }

core/src/activity-utils/makeStackReducer.ts

@@ -35,7 +35,7 @@ function withActivitiesReducer<T extends DomainEvent>(
     resumedAt?: number;
   },
 ) {
-  return (stack: Stack, event: T) => {
+  return (stack: Stack, event: T): Stack => {
     const activitiesReducer = makeActivitiesReducer({
       transitionDuration: stack.transitionDuration,
       now: context.now,
@@ -63,20 +63,21 @@ function withActivitiesReducer<T extends DomainEvent>(
       );
     }
 
-    const isLoading = activities.find(
-      (activity) =>
-        activity.transitionState === "enter-active" ||
-        activity.transitionState === "exit-active",
-    );
-
-    const globalTransitionState =
-      stack.globalTransitionState === "paused"
-        ? "paused"
-        : isLoading
-          ? "loading"
-          : "idle";
+    const finalizedStack = reducer({ ...stack, activities }, event);
 
-    return reducer({ ...stack, activities, globalTransitionState }, event);
+    return {
+      ...finalizedStack,
+      globalTransitionState:
+        finalizedStack.globalTransitionState === "paused"
+          ? "paused"
+          : finalizedStack.activities.find(
+                (activity) =>
+                  activity.transitionState === "enter-active" ||
+                  activity.transitionState === "exit-active",
+              )
+            ? "loading"
+            : "idle",
+    };
   };
 }
 
@@ -123,6 +124,7 @@ export function makeStackReducer(context: {
         return {
           ...stack,
           globalTransitionState: "paused",
+          pausedEvents: stack.pausedEvents ?? [],
         };
       }, context),
     ),

core/src/aggregate.spec.ts

@@ -4092,6 +4092,8 @@ test("aggregate - Resumed 되면 해당 시간 이후로 Transition이 정상작
   let pushedEvent1: PushedEvent;
   let pushedEvent2: PushedEvent;
 
+  const t = nowTime();
+
   const events = [
     initializedEvent({
       transitionDuration: 300,
@@ -4109,20 +4111,112 @@ test("aggregate - Resumed 되면 해당 시간 이후로 Transition이 정상작
       activityParams: {},
     })),
     makeEvent("Paused", {
-      eventDate: enoughPastTime(),
+      eventDate: t - 500,
     }),
     (pushedEvent2 = makeEvent("Pushed", {
       activityId: "activity-2",
       activityName: "b",
+      eventDate: t - 100,
+      activityParams: {},
+    })),
+    makeEvent("Resumed", {
+      eventDate: t,
+    }),
+  ];
+
+  const output = aggregate(events, t);
+
+  expect(output).toStrictEqual({
+    activities: [
+      activity({
+        id: "activity-1",
+        name: "a",
+        transitionState: "enter-done",
+        params: {},
+        steps: [
+          {
+            id: "activity-1",
+            params: {},
+            enteredBy: expect.anything(),
+            zIndex: 0,
+          },
+        ],
+        enteredBy: expect.anything(),
+        isActive: false,
+        isTop: false,
+        isRoot: true,
+        zIndex: 0,
+      }),
+      activity({
+        id: "activity-2",
+        name: "b",
+        transitionState: "enter-active",
+        params: {},
+        steps: [
+          {
+            id: "activity-2",
+            params: {},
+            enteredBy: expect.anything(),
+            zIndex: 1,
+          },
+        ],
+        enteredBy: expect.anything(),
+        isActive: true,
+        isTop: true,
+        isRoot: false,
+        zIndex: 1,
+      }),
+    ],
+    registeredActivities: [
+      {
+        name: "a",
+      },
+      {
+        name: "b",
+      },
+    ],
+    transitionDuration: 300,
+    globalTransitionState: "loading",
+  });
+});
+
+test("aggregate - PausedEvent makes active activities paused", () => {
+  let pushedEvent1: PushedEvent;
+  let pushedEvent2: PushedEvent;
+
+  const t = nowTime();
+
+  const events = [
+    initializedEvent({
+      transitionDuration: 300,
+    }),
+    registeredEvent({
+      activityName: "a",
+    }),
+    registeredEvent({
+      activityName: "b",
+    }),
+    (pushedEvent1 = makeEvent("Pushed", {
+      activityId: "activity-1",
+      activityName: "a",
       eventDate: enoughPastTime(),
       activityParams: {},
     })),
+    (pushedEvent2 = makeEvent("Pushed", {
+      activityId: "activity-2",
+      activityName: "b",
+      eventDate: t - 400,
+      activityParams: {},
+    })),
+    makeEvent("Paused", {
+      eventDate: t - 200,
+    }),
     makeEvent("Resumed", {
-      eventDate: nowTime() - 150,
+      eventDate: t,
     }),
   ];
 
-  const output = aggregate(events, nowTime());
+  const output = aggregate(events, t);
 
   expect(output).toStrictEqual({
     activities: [

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 = () =>