1 files changed, 21 insertions, 7 deletions
diff --git a/frontend/src/components/QuickAccessVisibleState.tsx b/frontend/src/components/QuickAccessVisibleState.tsx
index b5ee3b98..4df7e1a1 100644
--- a/frontend/src/components/QuickAccessVisibleState.tsx
+++ b/frontend/src/components/QuickAccessVisibleState.tsx
@@ -1,13 +1,27 @@
-import { FC, createContext, useContext } from 'react';
+import { FC, createContext, useContext, useEffect, useRef, useState } from 'react';
 
 const QuickAccessVisibleState = createContext<boolean>(true);
 
 export const useQuickAccessVisible = () => useContext(QuickAccessVisibleState);
 
-interface Props {
-  visible: boolean;
-}
-
-export const QuickAccessVisibleStateProvider: FC<Props> = ({ children, visible }) => {
-  return <QuickAccessVisibleState.Provider value={visible}>{children}</QuickAccessVisibleState.Provider>;
+export const QuickAccessVisibleStateProvider: FC<{}> = ({ children }) => {
+  const divRef = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState<boolean>(false);
+  useEffect(() => {
+    const doc: Document | void | null = divRef?.current?.ownerDocument;
+    if (!doc) return;
+    setVisible(doc.visibilityState == 'visible');
+    const onChange = (e: Event) => {
+      setVisible(doc.visibilityState == 'visible');
+    };
+    doc.addEventListener('visibilitychange', onChange);
+    return () => {
+      doc.removeEventListener('visibilitychange', onChange);
+    };
+  }, [divRef]);
+  return (
+    <div ref={divRef}>
+      <QuickAccessVisibleState.Provider value={visible}>{children}</QuickAccessVisibleState.Provider>
+    </div>
+  );
 };