Tooltip Flickering & EDGE_CONFIG Handling

app/api/session/route.ts

@@ -131,7 +131,18 @@ async function createSession(timezone?: string) {
     apiKey: process.env.BROWSERBASE_API_KEY!,
   });
 
-  const config = await getAll<EdgeConfig>();
+  let config: Partial<EdgeConfig> = {};
+  try {
+    // If EDGE_CONFIG is not set, this will throw an error.
+    // We catch it and fall back to an empty config object.
+    config = (await getAll<EdgeConfig>()) || {};
+  } catch {
+    // This is expected if EDGE_CONFIG is not set, so we can ignore the error
+    // and fall back to the default configuration.
+    console.log(
+      "EDGE_CONFIG not found or invalid, using default configuration."
+    );
+  }
 
   const {
     advancedStealth: advancedStealthConfig,

app/page.tsx

@@ -16,17 +16,41 @@ const Tooltip = ({
   text: string;
 }) => {
   const [isHovered, setIsHovered] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsHovered(false);
+    }, 200);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
 
   return (
     <div
       className="relative"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
     >
       {children}
       <AnimatePresence>
         {isHovered && (
           <motion.span
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
             initial={{ opacity: 0, y: 10, scale: 0.9 }}
             animate={{ opacity: 1, y: 3, scale: 1 }}
             exit={{ opacity: 0, y: 10, scale: 0.9 }}