use visibilitychange api instead of focus event

#3 (comment) @stramel is a legend
happykit · Feb 13, 2021 · 30c9038 · 30c9038
1 parent f9571ce
commit 30c9038
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/example/pages/examples/pure-static-site-generation.tsx b/example/pages/examples/pure-static-site-generation.tsx
@@ -3,7 +3,6 @@ import { GetStaticProps } from "next";
 import { Layout } from "../../components/Layout";
 import { Result } from "../../components/Result";
 import { getFlags } from "@happykit/flags/server";
-import { InitialFlagState } from "@happykit/flags/client";
 
 type AppFlags = { size: "small" | "medium" | "large" };
 type StaticProps = { flags: AppFlags };

diff --git a/package/src/client.ts b/package/src/client.ts
@@ -223,12 +223,14 @@ export function useFlags<F extends Flags = Flags>(
     if (!shouldRevalidateOnFocus) return;
 
     function handleFocus() {
-      dispatch({ type: "evaluate", input });
+      if (document.visibilityState === "visible") {
+        dispatch({ type: "evaluate", input });
+      }
     }
 
-    window.addEventListener("focus", handleFocus);
+    document.addEventListener("visibilitychange", handleFocus);
     return () => {
-      window.removeEventListener("focus", handleFocus);
+      document.removeEventListener("visibilitychange", handleFocus);
     };
   }, [state, currentUser, currentTraits, shouldRevalidateOnFocus]);