From e06fe81940372c6c2ba61f44fb5aaff85316ebad Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Mon, 20 Jan 2025 18:31:17 +0200
Subject: [PATCH] chore(clerk-js): Keyless prompt revalidate environment on
 focus at most every 10 seconds

---
 .changeset/soft-pumpkins-rescue.md                    |  5 +++++
 .../src/ui/components/KeylessPrompt/index.tsx         |  5 +++--
 .../KeylessPrompt/use-revalidate-environment.ts       | 11 ++++++++++-
 3 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/soft-pumpkins-rescue.md

diff --git a/.changeset/soft-pumpkins-rescue.md b/.changeset/soft-pumpkins-rescue.md
new file mode 100644
index 00000000000..2ea49635baa
--- /dev/null
+++ b/.changeset/soft-pumpkins-rescue.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Keyless prompt revalidate environment on focus at most every 10 seconds.
diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
index bf2c3a3f2b7..a30b4c9984b 100644
--- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
@@ -22,10 +22,11 @@ const contentIdentifier = `${buttonIdentifierPrefix}-content`;
 
 const _KeylessPrompt = (_props: KeylessPromptProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const claimed = Boolean(useRevalidateEnvironment().authConfig.claimedAt);
+  const environment = useRevalidateEnvironment();
+  const claimed = Boolean(environment.authConfig.claimedAt);
 
   const success = false;
-  const appName = useRevalidateEnvironment().displayConfig.applicationName;
+  const appName = environment.displayConfig.applicationName;
 
   const isForcedExpanded = claimed || success || isExpanded;
 
diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts b/packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts
index 12bd1ab84b2..fca17dc5c6f 100644
--- a/packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts
+++ b/packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts
@@ -1,16 +1,19 @@
 import { useClerk } from '@clerk/shared/react';
-import { useEffect, useReducer } from 'react';
+import { useEffect, useReducer, useRef } from 'react';
 
 import type { Clerk } from '../../../core/clerk';
 import type { Environment } from '../../../core/resources';
 import { useEnvironment } from '../../contexts';
 
+const THROTTLE_DURATION_MS = 10 * 1000;
+
 /**
  * Revalidates environment on focus, highly optimized for Keyless mode.
  * Attention: this is not a generic solution, and should not be used for revalidating environment inside UI components that are end-user facing (e.g. SignIn)
  */
 function useRevalidateEnvironment() {
   const clerk = useClerk();
+  const lastTouchTimestamp = useRef(Date.now());
   const [, forceUpdate] = useReducer(v => v + 1, 0);
 
   useEffect(() => {
@@ -29,6 +32,11 @@ function useRevalidateEnvironment() {
           return controller.abort();
         }
 
+        // Re-fetch at most every 10 seconds
+        if (Date.now() < lastTouchTimestamp.current + THROTTLE_DURATION_MS) {
+          return;
+        }
+
         if (document.visibilityState !== 'visible') {
           return;
         }
@@ -39,6 +47,7 @@ function useRevalidateEnvironment() {
           const {
             authConfig: { claimedAt },
           } = await environment.fetch();
+          lastTouchTimestamp.current = Date.now();
 
           if (claimedAt !== null) {
             forceUpdate();