From eb5799336c22e884e7eecde4273b5051d76fa83e Mon Sep 17 00:00:00 2001
From: "DESKTOP-RTLN3BA\\$punk" <vermarohanfinal@gmail.com>
Date: Mon, 6 Apr 2026 22:15:05 -0700
Subject: [PATCH] refactor: streamline BrowserWindow component functionality

- Removed the interval management for tab selection, simplifying the state handling.
- Updated tab click handler to directly set the selected index without restarting the interval.
- Changed video preload attribute from "none" to "auto" for improved loading performance.
---
 .../components/homepage/hero-section.tsx      | 28 ++-----------------
 1 file changed, 2 insertions(+), 26 deletions(-)

diff --git a/surfsense_web/components/homepage/hero-section.tsx b/surfsense_web/components/homepage/hero-section.tsx
index 1bb28e770..60f293005 100644
--- a/surfsense_web/components/homepage/hero-section.tsx
+++ b/surfsense_web/components/homepage/hero-section.tsx
@@ -180,32 +180,8 @@ function GetStartedButton() {
 const BrowserWindow = () => {
 	const [selectedIndex, setSelectedIndex] = useState(0);
 	const selectedItem = TAB_ITEMS[selectedIndex];
-	const intervalRef = useRef<NodeJS.Timeout | null>(null);
 	const { expanded, open, close } = useExpandedMedia();
 
-	const startInterval = useCallback(() => {
-		if (intervalRef.current) {
-			clearInterval(intervalRef.current);
-		}
-		intervalRef.current = setInterval(() => {
-			setSelectedIndex((prev) => (prev + 1) % TAB_ITEMS.length);
-		}, 10000);
-	}, []);
-
-	useEffect(() => {
-		startInterval();
-		return () => {
-			if (intervalRef.current) {
-				clearInterval(intervalRef.current);
-			}
-		};
-	}, [startInterval]);
-
-	const handleTabClick = (index: number) => {
-		setSelectedIndex(index);
-		startInterval();
-	};
-
 	return (
 		<>
 			<motion.div className="relative my-4 flex w-full flex-col items-start justify-start overflow-hidden rounded-2xl shadow-2xl md:my-12">
@@ -220,7 +196,7 @@ const BrowserWindow = () => {
 							<React.Fragment key={item.title}>
 							<button
 								type="button"
-								onClick={() => handleTabClick(index)}
+								onClick={() => setSelectedIndex(index)}
 								className={cn(
 									"flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-xs transition duration-150 hover:bg-white sm:text-sm dark:hover:bg-neutral-950",
 									selectedIndex === index && !item.featured &&
@@ -334,7 +310,7 @@ const TabVideo = memo(function TabVideo({ src }: { src: string }) {
 				ref={videoRef}
 				key={src}
 				src={src}
-				preload="none"
+				preload="auto"
 				loop
 				muted
 				playsInline