feat: implement ad fetch delay and introduce useDelayedFlag hook

Author: medyo

src/features/adv/components/AdvBanner.tsx

@@ -1,7 +1,9 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { AdPlaceholder } from 'src/components/placeholders'
+import { useRemoteConfigStore } from 'src/features/remoteConfig'
 import { useUserPreferences } from 'src/stores/preferences'
 import { useGetAd } from '../api/getAd'
+import { useDelayedFlag } from '../hooks/useDelayedFlag'
 import { Ad } from '../types'
 import './AdvBanner.css'
 
@@ -13,10 +15,9 @@ type AdvBannerProps = {
 
 export const AdvBanner = ({ feedDisplay = false, loadingState, onAdLoaded }: AdvBannerProps) => {
   const { userSelectedTags } = useUserPreferences()
+  const adsFetchDelayMs = useRemoteConfigStore((s) => s.adsFetchDelayMs)
+  const isReady = useDelayedFlag(adsFetchDelayMs)
 
-  const [aditionalAdQueries, setAditionalAdQueries] = useState<
-    { [key: string]: string } | undefined
-  >()
   const {
     isSuccess,
     data: ad,
@@ -25,18 +26,11 @@ export const AdvBanner = ({ feedDisplay = false, loadingState, onAdLoaded }: Adv
   } = useGetAd({
     keywords: userSelectedTags.map((tag) => tag.label.toLocaleLowerCase()),
     feed: true,
-    aditionalAdQueries: aditionalAdQueries,
     config: {
       cacheTime: 0,
       staleTime: 0,
+      enabled: isReady,
       useErrorBoundary: false,
-      refetchInterval(data) {
-        if (data?.nextAd) {
-          setAditionalAdQueries(data.nextAd.queries)
-          return data.nextAd.interval
-        }
-        return false
-      },
     },
   })
 

src/features/adv/hooks/useDelayedFlag.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState, useTransition } from 'react'
+
+export const useDelayedFlag = (ms: number | undefined) => {
+  const [ready, setReady] = useState(false)
+  const [, startTransition] = useTransition()
+  useEffect(() => {
+    if (ms === undefined || ms <= 0) {
+      setReady(true)
+      return
+    }
+    const t = setTimeout(() => startTransition(() => setReady(true)), ms)
+    return () => clearTimeout(t)
+  }, [ms])
+
+  return ready
+}

src/features/remoteConfig/api/getRemoteConfig.ts

@@ -15,7 +15,7 @@ type UseGetRemoteConfigOptions = {
 export const useGetRemoteConfig = ({ config }: UseGetRemoteConfigOptions = {}) => {
   return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
-    queryKey: ['remote-config', 'v2'],
+    queryKey: ['remote-config', 'v3'],
     queryFn: () => getRemoteConfig(),
   })
 }

src/features/remoteConfig/stores/remoteConfig.ts

@@ -3,8 +3,10 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { RemoteConfig, Tag } from '../types'
 
+const DEFAULT_ADS_FETCH_DELAY_MS = 1750
 type RemoteConfigStore = {
   tags: Tag[]
+  adsFetchDelayMs: number
   setRemoteConfig: (remoteConfig: RemoteConfig) => void
 }
 
@@ -17,7 +19,12 @@ export const useRemoteConfigStore = create(
           label: 'Javascript',
         },
       ],
-      setRemoteConfig: (remoteConfig: RemoteConfig) => set({ tags: remoteConfig.tags }),
+      adsFetchDelayMs: DEFAULT_ADS_FETCH_DELAY_MS,
+      setRemoteConfig: (remoteConfig: RemoteConfig) =>
+        set({
+          tags: remoteConfig.tags,
+          adsFetchDelayMs: remoteConfig.ads_fetch_delay_ms || DEFAULT_ADS_FETCH_DELAY_MS,
+        }),
     }),
     {
       name: 'remote_config_storage',

src/features/remoteConfig/types/index.ts

@@ -6,4 +6,5 @@ export type Tag = {
 
 export type RemoteConfig = {
   tags: Tag[]
+  ads_fetch_delay_ms?: number
 }