fix(rudderstack): proper timeout option (#2790)

Author: philibea

.changeset/sour-comics-flash.md

@@ -0,0 +1,5 @@
+---
+"@scaleway/use-analytics": patch
+---
+
+Add a proper timeout option to avoid re-render

packages/use-analytics/src/analytics/useAnalytics.tsx

@@ -5,7 +5,11 @@ import type { ReactNode } from 'react'
 import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect'
 import { destSDKBaseURL, pluginsSDKBaseURL } from '../constants'
 import type { CategoryKind } from '../types'
-import { defaultConsentOptions, defaultLoadOptions, defaultTimeout } from './constants'
+import {
+  defaultConsentOptions,
+  defaultLoadOptions,
+  defaultTimeout,
+} from './constants'
 import { normalizeIdsMigration } from './normalizeIdsMigration'
 
 type Analytics = RudderAnalytics
@@ -92,17 +96,25 @@ export function AnalyticsProvider<T extends Events>({
   // This effect will unlock the case where we have a failure with the load of the analytics.load as rudderstack doesn't provider any solution for this case.
   useEffect(() => {
     let timer: ReturnType<typeof setTimeout> | undefined
-    if (!isAnalyticsReady && (Number.isFinite(timeout) || shouldRenderOnlyWhenReady)) {
-        timer = setTimeout(() => setIsAnalyticsReady(true), timeout ?? defaultTimeout)
-        onError?.(new Error('Analytics Setup Timeout'))
+    if (
+      !isAnalyticsReady &&
+      (Number.isFinite(timeout) || shouldRenderOnlyWhenReady)
+    ) {
+      timer = setTimeout(() => {
+        setIsAnalyticsReady(true)
+        onError?.(new Error('Timeout'))
+      }, timeout ?? defaultTimeout)
+    }
+
+    if (isAnalyticsReady) {
+      clearTimeout(timer)
     }
 
     return () => {
       clearTimeout(timer)
     }
   }, [
     isAnalyticsReady,
-    internalAnalytics,
     setIsAnalyticsReady,
     shouldRenderOnlyWhenReady,
     timeout,
@@ -144,7 +156,13 @@ export function AnalyticsProvider<T extends Events>({
       })
 
       analytics.ready(() => {
-        setAnalytics(analytics)
+        /**
+         * this will wait for client destination to be ready, but analytics is ready.
+         * we can listen for RSA_Ready event to know when the analytics is ready if we don't want to wait for the client destination to be ready.
+         * document.addEventListener('RSA_Ready', function(e) {
+         *  console.log('RSA_Ready', e.detail.analyticsInstance);
+         * });
+         */
         setIsAnalyticsReady(true)
       })
     }

pnpm-lock.yaml

@@ -20,7 +20,7 @@ catalog:
   '@formatjs/fast-memoize': 2.2.7
   '@formatjs/icu-messageformat-parser': 2.11.2
   '@growthbook/growthbook-react': 1.6.1
-  '@rudderstack/analytics-js': 3.22.0
+  '@rudderstack/analytics-js': 3.24.0
   '@scaleway/use-segment': 1.1.11
   '@segment/analytics-next': 1.81.1
   '@stylistic/eslint-plugin': 4.4.1