diff --git a/.changeset/fifty-roses-give.md b/.changeset/fifty-roses-give.md new file mode 100644 index 00000000..d3461274 --- /dev/null +++ b/.changeset/fifty-roses-give.md @@ -0,0 +1,5 @@ +--- +"@adhese/sdk": patch +--- + +Changing Tracked Hooks from Async to Passive. diff --git a/packages/sdk/src/slot/slot.composables.ts b/packages/sdk/src/slot/slot.composables.ts index 5f0f7e7b..391cbca4 100644 --- a/packages/sdk/src/slot/slot.composables.ts +++ b/packages/sdk/src/slot/slot.composables.ts @@ -152,8 +152,8 @@ export function useSlotHooks({ setup }: AdheseSlotOptions, slotContext: Ref>[0]; runOnEmpty: ReturnType>[0]; runOnError: ReturnType>[0]; - runOnImpressionTracked: ReturnType>[0]; - runOnViewableTracked: ReturnType>[0]; + runOnImpressionTracked: ReturnType>[0]; + runOnViewableTracked: ReturnType>[0]; } & AdheseSlotHooks { const [runOnBeforeRender, onBeforeRender, disposeOnBeforeRender] = createAsyncHook(); const [runOnRender, onRender, disposeOnRender] = createPassiveHook(); @@ -163,8 +163,8 @@ export function useSlotHooks({ setup }: AdheseSlotOptions, slotContext: Ref(); - const [runOnImpressionTracked, onImpressionTracked, disposeOnImpressionTracked] = createAsyncHook(); - const [runOnViewableTracked, onViewableTracked, disposeOnViewableTracked] = createAsyncHook(); + const [runOnImpressionTracked, onImpressionTracked, disposeOnImpressionTracked] = createPassiveHook(); + const [runOnViewableTracked, onViewableTracked, disposeOnViewableTracked] = createPassiveHook(); setup?.(slotContext, { onBeforeRender, diff --git a/packages/sdk/src/slot/slot.ts b/packages/sdk/src/slot/slot.ts index 0ab0207d..b22db4bb 100644 --- a/packages/sdk/src/slot/slot.ts +++ b/packages/sdk/src/slot/slot.ts @@ -201,21 +201,22 @@ export function createSlot(slotOptions: AdheseSlotOptions): AdheseSlot { { immediate: true, deep: true }, ); - const isInViewport = useRenderIntersectionObserver({ - options, - element, - hooks, - }); - - watch( - isInViewport, - async (newIsInViewport) => { - if (newIsInViewport && status.value !== 'rendered') - await slotContext.value?.render(); - }, - { immediate: true }, - ); - + if (!context.options.eagerRendering){ + const isInViewport = useRenderIntersectionObserver({ + options, + element, + hooks, + }); + + watch( + isInViewport, + async (newIsInViewport) => { + if (newIsInViewport && status.value !== 'rendered') + await slotContext.value?.render(); + }, + { immediate: true }, + ); + } hooks.onDispose(() => { disposeQueryDetector(); }); diff --git a/packages/sdk/src/slot/slot.types.ts b/packages/sdk/src/slot/slot.types.ts index a350a1c9..37ecef50 100644 --- a/packages/sdk/src/slot/slot.types.ts +++ b/packages/sdk/src/slot/slot.types.ts @@ -38,11 +38,11 @@ export type AdheseSlotHooks = { /** * Hook that is called when the slots impressions tracker is fired. */ - onImpressionTracked: ReturnType>[1]; + onImpressionTracked: ReturnType>[1]; /** * Hook that is called when the slots impressions tracker is fired. */ - onViewableTracked: ReturnType>[1]; + onViewableTracked: ReturnType>[1]; }; export type AdheseSlotOptions = { /**