fix: handle timeout issues in splashscreen (VO-231)

src/App.js

@@ -48,7 +48,10 @@ import {
 import { useOsReceiveApi } from '/app/view/OsReceive/hooks/useOsReceiveApi'
 import { LockScreenWrapper } from '/app/view/Lock/LockScreenWrapper'
 import { useSecureBackgroundSplashScreen } from '/hooks/useSplashScreen'
-import { hideSplashScreen } from '/app/theme/SplashScreenService'
+import {
+  hideSplashScreen,
+  setTimeoutForSplashScreen
+} from '/app/theme/SplashScreenService'
 import { initFlagshipUIService } from '/app/view/FlagshipUI'
 import {
   useLauncherContext,
@@ -220,6 +223,7 @@ const Wrapper = () => {
 
   useEffect(() => {
     initFlagshipUIService()
+    setTimeoutForSplashScreen()
   }, [])
 
   return (

src/app/theme/SplashScreenService.spec.ts

@@ -73,7 +73,7 @@ describe('SplashScreenService', () => {
     jest.advanceTimersByTime(newDuration)
 
     expect(RNBootSplash.hide).toHaveBeenLastCalledWith({
-      bootsplashName: undefined,
+      bootsplashName: 'global', // Default bootsplash name when none is provided
       fade: true
     })
   })

src/app/theme/SplashScreenService.ts

@@ -1,36 +1,53 @@
+import { AppState } from 'react-native'
 import RNBootSplash, { VisibilityStatus } from 'react-native-bootsplash'
 
+import Minilog from 'cozy-minilog'
+
 import { flagshipUIEventHandler, flagshipUIEvents } from '/app/view/FlagshipUI'
-import { devlog } from '/core/tools/env'
 import { logToSentry } from '/libs/monitoring/Sentry'
 import config from '/app/theme/config.json'
 
+const splashScreenLogger = Minilog('☁️ SplashScreen')
+
 export const splashScreens = {
   LOCK_SCREEN: 'LOCK_SCREEN',
-  SECURE_BACKGROUND: 'secure_background' // this mirrors native declaration
+  SECURE_BACKGROUND: 'secure_background', // this mirrors native declaration
+  GLOBAL: 'global'
 } as const
 
 type SplashScreenEnumKeys = keyof typeof splashScreens
 export type SplashScreenEnum = (typeof splashScreens)[SplashScreenEnumKeys]
 
-let autoHideTimer: NodeJS.Timeout | null = null
+// Using a map to handle multiple timers
+const autoHideTimers: Record<string, NodeJS.Timeout | undefined> = {}
+
 let autoHideDuration = config.autoHideDuration // Default timeout duration in milliseconds
 
 export const setAutoHideDuration = (duration: number): void => {
   autoHideDuration = duration
 }
 
+/**
+ * Retrieves the status of the splash screen ("visible" | "hidden" | "transitioning").
+ * @returns A promise that resolves to the visibility status of the splash screen.
+ */
+export const getSplashScreenStatus = (): Promise<VisibilityStatus> => {
+  return RNBootSplash.getVisibilityStatus()
+}
+
 /**
  * Shows the splash screen with the specified bootsplash name.
- * If no bootsplash name is provided, it will default to 'undefined'.
+ * If no bootsplash name is provided, it will default to a unique identifier 'global'.
  *
  * @param bootsplashName - The name of the bootsplash.
  * @returns A promise that resolves when the splash screen is shown.
  */
-export const showSplashScreen = (
-  bootsplashName?: SplashScreenEnum
+export const showSplashScreen = async (
+  bootsplashName: SplashScreenEnum | undefined = splashScreens.GLOBAL
 ): Promise<void> => {
-  devlog(`☁️ showSplashScreen called with ${bootsplashName ?? 'undefined'}`)
+  splashScreenLogger.debug(
+    `Attempting to show splash screen "${bootsplashName}"`
+  )
 
   flagshipUIEventHandler.emit(
     flagshipUIEvents.SET_COMPONENT_COLORS,
@@ -41,29 +58,18 @@ export const showSplashScreen = (
     }
   )
 
-  if (autoHideTimer) {
-    clearTimeout(autoHideTimer)
-  }
+  setTimeoutForSplashScreen(bootsplashName)
 
-  // Auto-hide the splash screen after a certain duration
-  // This mitigates the issue of the splash screen not being hidden for unforeseen reasons
-  if (bootsplashName !== splashScreens.SECURE_BACKGROUND) {
-    autoHideTimer = setTimeout(() => {
-      hideSplashScreen(bootsplashName).catch(error => {
-        devlog(`☁️ hideSplashScreen error:`, error)
-      })
-
-      logToSentry(
-        new Error(
-          `Splashscreen reached autoHideDuration with bootsplahName: ${
-            bootsplashName ?? 'undefined'
-          } and autoHideDuration: ${autoHideDuration}`
-        )
-      )
-    }, autoHideDuration)
+  try {
+    await RNBootSplash.show({ fade: true, bootsplashName })
+    return splashScreenLogger.info(`Splash screen shown "${bootsplashName}"`)
+  } catch (error) {
+    splashScreenLogger.error(
+      `Error showing splash screen: ${bootsplashName}`,
+      error
+    )
+    logToSentry(error)
   }
-
-  return RNBootSplash.show({ fade: true, bootsplashName })
 }
 
 /**
@@ -72,28 +78,155 @@ export const showSplashScreen = (
  * @param bootsplashName - Optional name of the bootsplash.
  * @returns A promise that resolves when the splash screen is hidden.
  */
-export const hideSplashScreen = (
-  bootsplashName?: SplashScreenEnum
+export const hideSplashScreen = async (
+  bootsplashName: SplashScreenEnum | undefined = splashScreens.GLOBAL
 ): Promise<void> => {
-  // Clear the auto-hide timer as we don't want to hide the splash screen twice
-  if (autoHideTimer) {
-    clearTimeout(autoHideTimer)
-    autoHideTimer = null
-  }
+  splashScreenLogger.debug(
+    `Attempting to hide splash screen "${bootsplashName}"`
+  )
 
   flagshipUIEventHandler.emit(
     flagshipUIEvents.SET_COMPONENT_COLORS,
     `Splashscreen`,
     undefined
   )
 
-  return RNBootSplash.hide({ fade: true, bootsplashName })
+  try {
+    await manageTimersAndHideSplashScreen(bootsplashName)
+    return splashScreenLogger.info(`Splash screen hidden "${bootsplashName}"`)
+  } catch (error) {
+    splashScreenLogger.error(
+      `Error hiding splash screen: ${bootsplashName}`,
+      error
+    )
+    logToSentry(error)
+  }
 }
 
-/**
- * Retrieves the status of the splash screen ("visible" | "hidden" | "transitioning").
- * @returns A promise that resolves to the visibility status of the splash screen.
- */
-export const getSplashScreenStatus = (): Promise<VisibilityStatus> => {
-  return RNBootSplash.getVisibilityStatus()
+export const setTimeoutForSplashScreen = (
+  bootsplashName: SplashScreenEnum | undefined = splashScreens.GLOBAL
+): void => {
+  if (bootsplashName === splashScreens.SECURE_BACKGROUND) {
+    splashScreenLogger.info(
+      `Skipping timeout for secure background "${bootsplashName}"`
+    )
+    return
+  }
+
+  destroyTimer(bootsplashName)
+
+  autoHideTimers[bootsplashName] = setTimeout(() => {
+    splashScreenLogger.warn(
+      `Auto-hide duration reached for splash screen "${bootsplashName}"`
+    )
+
+    logToSentry(
+      new Error(
+        `Splashscreen reached autoHideDuration with bootsplashName "${bootsplashName}"`
+      )
+    )
+
+    void manageTimersAndHideSplashScreen(bootsplashName, true)
+  }, autoHideDuration)
+
+  splashScreenLogger.debug(
+    `Setting timeout with ID "${JSON.stringify(
+      autoHideTimers[bootsplashName]
+    )}" for splash screen "${bootsplashName}"`
+  )
+}
+
+const manageTimersAndHideSplashScreen = async (
+  bootsplashName: SplashScreenEnum | undefined = splashScreens.GLOBAL,
+  fromTimeout = false
+): Promise<void> => {
+  if (bootsplashName !== splashScreens.SECURE_BACKGROUND)
+    destroyTimer(bootsplashName, fromTimeout)
+
+  try {
+    await RNBootSplash.hide({ fade: true, bootsplashName })
+  } catch (error) {
+    splashScreenLogger.error(
+      `Error managing timers and hiding splash screen "${bootsplashName}"`,
+      error
+    )
+    logToSentry(error)
+  }
+}
+
+const destroyTimer = (
+  bootsplashName: SplashScreenEnum,
+  fromTimeout = false
+): void => {
+  const timer = autoHideTimers[bootsplashName]
+
+  if (autoHideTimers[bootsplashName]) {
+    if (fromTimeout) {
+      splashScreenLogger.debug(
+        `Destroying existing timer with ID "${JSON.stringify(
+          timer
+        )}" for splash screen "${bootsplashName}" after auto-hide duration reached`
+      )
+    } else {
+      splashScreenLogger.debug(
+        `Clearing existing timer with ID "${JSON.stringify(
+          timer
+        )}" for splash screen "${bootsplashName}" after manual hide`
+      )
+    }
+
+    clearTimeout(autoHideTimers[bootsplashName])
+    Reflect.deleteProperty(autoHideTimers, bootsplashName)
+  }
 }
+
+let activeTimersAtBackground: Record<string, boolean> = {}
+
+const resetTimersOnActive = (): void => {
+  splashScreenLogger.debug(
+    `App is becoming active. Evaluating timers to reset...`
+  )
+
+  const timersToReset = Object.keys(activeTimersAtBackground)
+
+  if (timersToReset.length === 0) {
+    splashScreenLogger.info(`No splash screen timers to reset.`)
+  } else {
+    timersToReset.forEach(splashScreen => {
+      if (activeTimersAtBackground[splashScreen]) {
+        splashScreenLogger.info(
+          `Resetting timer for splash screen "${splashScreen}"`
+        )
+        setTimeoutForSplashScreen(splashScreen as SplashScreenEnum)
+      }
+    })
+  }
+
+  // Clear the record once timers are reset
+  activeTimersAtBackground = {}
+}
+
+const clearTimersOnBackground = (): void => {
+  splashScreenLogger.debug(
+    `App is going to background. Clearing active timers...`
+  )
+
+  Object.keys(autoHideTimers).forEach(splashScreen => {
+    if (autoHideTimers[splashScreen]) {
+      splashScreenLogger.info(
+        `Clearing timer for splash screen "${splashScreen}". Will reset on active.`
+      )
+      activeTimersAtBackground[splashScreen] = true // Mark as active
+      clearTimeout(autoHideTimers[splashScreen])
+      Reflect.deleteProperty(autoHideTimers, splashScreen)
+    }
+  })
+}
+
+AppState.addEventListener('change', nextAppState => {
+  if (nextAppState === 'active') {
+    resetTimersOnActive()
+  } else if (nextAppState === 'background') {
+    clearTimersOnBackground()
+  }
+})

src/libs/httpserver/indexGenerator.spec.js

@@ -17,6 +17,9 @@ import { shouldDisableGetIndex } from '/core/tools/env'
 jest.mock('react-native', () => ({
   Platform: {
     OS: 'ios'
+  },
+  AppState: {
+    addEventListener: jest.fn()
   }
 }))