wip: async tracker

Author: Julusian

packages/webui/src/client/lib/ReactMeteorData/ReactMeteorData.tsx

@@ -368,6 +368,36 @@ export function useTracker<T, K extends undefined | T = undefined>(
 	return meteorData
 }
 
+/**
+ * A Meteor Tracker hook that allows using React Functional Components and the Hooks API with Meteor Tracker
+ *
+ * This is an alternate implementation which supports promises in the autorun function, and will preserve the previous value until the promise resolves.
+ *
+ * @param {() => Promise<T>} autorun The autorun function to be run.
+ * @param {React.DependencyList} [deps] A required list of dependenices to limit the tracker re-running. Can be left empty, if tracker
+ * 		has no external dependencies and should only be rerun when it's invalidated.
+ * @param {K} [initial] An optional, initial state of the tracker. If not provided, the tracker may return undefined.
+ * @return {*}  {(T | K)}
+ */
+export function useTrackerAsyncTest<T, K extends undefined | T = undefined>(
+	autorun: (computation: Tracker.Computation) => Promise<T>,
+	deps: React.DependencyList,
+	initial?: K
+): T | K {
+	const [meteorData, setMeteorData] = useState<T | K>(initial as K)
+
+	useEffect(() => {
+		const computation = Tracker.nonreactive(() =>
+			Tracker.autorun(async (innerComputation) => {
+				setMeteorData(await autorun(innerComputation))
+			})
+		)
+		return () => computation.stop()
+	}, deps)
+
+	return meteorData
+}
+
 /**
  * A Meteor Subscription hook that allows using React Functional Components and the Hooks API with Meteor subscriptions.
  * Subscriptions will be torn down 1000ms after unmounting the component.

packages/webui/src/client/ui/Settings/components/triggeredActions/TriggeredActionEntry.tsx

@@ -10,7 +10,7 @@ import {
 } from '@sofie-automation/blueprints-integration'
 import classNames from 'classnames'
 import { DBBlueprintTrigger } from '@sofie-automation/meteor-lib/dist/collections/TriggeredActions'
-import { useTracker } from '../../../../lib/ReactMeteorData/ReactMeteorData'
+import { useTracker, useTrackerAsyncTest } from '../../../../lib/ReactMeteorData/ReactMeteorData'
 import { ActionEditor } from './actionEditors/ActionEditor'
 import { OutputLayers, SourceLayers } from '@sofie-automation/corelib/dist/dataModel/ShowStyleBase'
 import { flatten, getRandomString } from '../../../../lib/tempLib'
@@ -180,33 +180,34 @@ export const TriggeredActionEntry: React.FC<IProps> = React.memo(function Trigge
 		[triggeredAction?.actionsWithOverrides]
 	)
 
-	const previewItems = useTracker(
-		(computation) => {
+	const previewItems = useTrackerAsyncTest<IWrappedAdLib[], IWrappedAdLib[]>(
+		async (computation) => {
 			try {
+				if (!resolvedActions || !selected || !sourceLayers) return []
+
 				const triggerComputation = computation as any as TriggerTrackerComputation
-				if (resolvedActions && selected && sourceLayers) {
-					const executableActions = Object.values<SomeAction>(resolvedActions).map((value) =>
-						createAction(UiTriggersContext, value, sourceLayers)
-					)
-					const ctx = previewContext
-					if (ctx && ctx.rundownPlaylist) {
-						return flatten(
-							await Promise.all(
-								executableActions.map(
-									async (action): Promise<IWrappedAdLib[]> =>
-										isPreviewableAction(action) ? action.preview(ctx as any, triggerComputation) : []
-								)
-							)
+
+				const executableActions = Object.values<SomeAction>(resolvedActions).map((value) =>
+					createAction(UiTriggersContext, value, sourceLayers)
+				)
+				const ctx = previewContext
+				if (!ctx || !ctx.rundownPlaylist) return []
+
+				return flatten(
+					await Promise.all(
+						executableActions.map(
+							async (action): Promise<IWrappedAdLib[]> =>
+								isPreviewableAction(action) ? action.preview(ctx as any, triggerComputation) : []
 						)
-					}
-				}
+					)
+				)
 			} catch (e) {
 				catchError('TriggeredActionEntry previewItems')(e)
 			}
-			return [] as IWrappedAdLib[]
+			return []
 		},
 		[selected, resolvedActions, sourceLayers],
-		[] as IWrappedAdLib[]
+		[]
 	)
 
 	function getType(sourceLayerId: string | undefined): SourceLayerType {