From edc2fafa2ea9c438e9f7efe9c15f4162f4de9d00 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechatinc.com>
Date: Wed, 20 Nov 2024 08:05:26 +0100
Subject: [PATCH] fix(useAnimations): flag to enable sleep wake scenarios
 (#1435)

---
 .../NavigationTopBar/NavigationTopBar.tsx     |  1 +
 .../src/hooks/useAnimations.ts                | 26 +++++++----------
 .../src/hooks/useSleepWakeSync.ts             | 29 +++++++++++++++++++
 3 files changed, 40 insertions(+), 16 deletions(-)
 create mode 100644 packages/react-components/src/hooks/useSleepWakeSync.ts

diff --git a/packages/react-components/src/components/AppFrame/components/NavigationTopBar/NavigationTopBar.tsx b/packages/react-components/src/components/AppFrame/components/NavigationTopBar/NavigationTopBar.tsx
index 9918116e8..d6fc5425d 100644
--- a/packages/react-components/src/components/AppFrame/components/NavigationTopBar/NavigationTopBar.tsx
+++ b/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) =>
diff --git a/packages/react-components/src/hooks/useAnimations.ts b/packages/react-components/src/hooks/useAnimations.ts
index 0104dae56..803518376 100644
--- a/packages/react-components/src/hooks/useAnimations.ts
+++ b/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,
diff --git a/packages/react-components/src/hooks/useSleepWakeSync.ts b/packages/react-components/src/hooks/useSleepWakeSync.ts
new file mode 100644
index 000000000..d26c30641
--- /dev/null
+++ b/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]);
+};