fix(useAnimations): flag to enable sleep wake scenarios (#1435)

packages/react-components/src/components/AppFrame/components/NavigationTopBar/NavigationTopBar.tsx

@@ -101,6 +101,7 @@ export const NavigationTopBarAlert: React.FC<ITopBarAlertProps> = ({
   const { isMounted, isOpen } = useAnimations({
     isVisible,
     elementRef: alertRef,
+    includeSleepWakeScenario: true,
   });
   const handleResizeRef = React.useCallback(
     (node: NODE) =>

packages/react-components/src/hooks/useAnimations.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 
+import { useSleepWakeSync } from './useSleepWakeSync';
+
 interface UseAnimationsProps {
   isVisible: boolean;
   elementRef: React.RefObject<HTMLDivElement>;
+  includeSleepWakeScenario?: boolean;
 }
 
 interface IUseAnimations {
@@ -14,6 +17,7 @@ interface IUseAnimations {
 export const useAnimations = ({
   isVisible,
   elementRef,
+  includeSleepWakeScenario = false,
 }: UseAnimationsProps): IUseAnimations => {
   const [isMounted, setIsMounted] = React.useState(isVisible);
   const [isOpen, setIsOpen] = React.useState(isVisible);
@@ -55,27 +59,17 @@ export const useAnimations = ({
     }
   }, [shouldBeVisible]);
 
-  // Effect to listen for visibility changes (detecting sleep/wake scenarios)
-  React.useEffect(() => {
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === 'visible') {
-        // Reset the animation state when returning to the visible state
-        setShouldBeVisible(isVisible);
-      }
-    };
-
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-    };
-  }, [isVisible]);
-
   // Synchronize shouldBeVisible with the isVisible prop
   React.useEffect(() => {
     setShouldBeVisible(isVisible);
   }, [isVisible]);
 
+  // Effect to listen for visibility changes (detecting sleep/wake scenarios)
+  useSleepWakeSync(
+    () => setShouldBeVisible(isVisible),
+    includeSleepWakeScenario
+  );
+
   return {
     isOpen,
     isMounted,

packages/react-components/src/hooks/useSleepWakeSync.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+/**
+ * Syncs the wake event with the visibility change event.
+ * @param onWake The function to call when the wake event is triggered.
+ * @param enabled Whether the sync should be enabled.
+ */
+export const useSleepWakeSync = (onWake: () => void, enabled: boolean) => {
+  React.useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        onWake();
+      }
+    };
+
+    if (enabled) {
+      document.addEventListener('visibilitychange', handleVisibilityChange);
+    }
+
+    return () => {
+      if (enabled) {
+        document.removeEventListener(
+          'visibilitychange',
+          handleVisibilityChange
+        );
+      }
+    };
+  }, [onWake, enabled]);
+};