feat(core): add waitTransition (#983)

packages/core/src/transitions/index.ts

@@ -7,5 +7,6 @@
 export * from './fadeTransition';
 export * from './slideTransition';
 export * from './useTransition';
+export * from './waitTransition';
 export * from './zoomInTransition';
 export * from './zoomOutTransition';

packages/core/src/transitions/waitTransition.ts

@@ -0,0 +1,31 @@
+import {waitFor} from '../flow';
+import {SignalValue} from '../signals';
+import {ThreadGenerator} from '../threading';
+import {useTransition} from './useTransition';
+
+/**
+ * Perform a transition that doesn't do anything.
+ *
+ * @remarks
+ * This is useful when you want to achieve a transition effect by animating
+ * objects in the scenes. It will overlay the scenes on top of each other for
+ * the duration of the transition.
+ *
+ * @param duration - The duration of the transition.
+ * @param previousOnTop - Whether the previous scene should be rendered on top.
+ */
+export function* waitTransition(
+  duration = 0.6,
+  previousOnTop: SignalValue<boolean> = true,
+): ThreadGenerator {
+  const endTransition = useTransition(
+    () => {
+      // do nothing
+    },
+    undefined,
+    previousOnTop,
+  );
+
+  yield* waitFor(duration);
+  endTransition();
+}

packages/docs/docs/getting-started/transitions.mdx

@@ -90,6 +90,11 @@ All available transitions are listed below:
 <ApiSnippet url={'/api/core/transitions#fadeTransition'} />
 <hr />
 
+### `waitTransition`
+
+<ApiSnippet url={'/api/core/transitions#waitTransition'} />
+<hr />
+
 ## Custom transitions
 
 You can use the [`useTransition`](/api/core/transitions#useTransition) function