From 914510612a17844ae6b965d1781da125facbda9e Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 19:58:13 +0000
Subject: [PATCH] Improve video loading speed by optimizing data fetching and
 caching

Update data fetching configurations to enable aggressive caching, increase staleTime to 5 minutes, and gcTime to 10 minutes. Disable refetching on window focus and reconnect events. Modify the useEffect hook to only trigger refetch on searchQuery changes, not offset changes.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/clVZrpf
---
 client/src/pages/home.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index ae540fb..50e8103 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -20,7 +20,7 @@ export default function Home() {
 
 
 
-  // Fetch videos with optimized caching
+  // Fetch videos with aggressive caching for speed
   const { data: videosResponse, isLoading, refetch } = useQuery<VideosResponse>({
     queryKey: ["/api/videos", { 
       limit: 20, 
@@ -43,10 +43,10 @@ export default function Home() {
       }
       return response.json();
     },
-    staleTime: 0, // No caching - always fresh data
-    gcTime: 0, // No cache retention
-    refetchOnWindowFocus: true,
-    refetchOnReconnect: true
+    staleTime: 5 * 60 * 1000, // 5 minutes cache - much faster
+    gcTime: 10 * 60 * 1000, // 10 minutes retention
+    refetchOnWindowFocus: false, // Don't refetch on focus
+    refetchOnReconnect: false // Don't refetch on reconnect
   });
 
   // Update videos when new data comes in
@@ -71,10 +71,12 @@ export default function Home() {
     setOffset(prev => prev + 20);
   };
 
-  // Force refetch when search changes
+  // Only refetch when search changes, not offset (for speed)
   useEffect(() => {
-    refetch();
-  }, [searchQuery, offset, refetch]);
+    if (searchQuery !== undefined) {
+      refetch();
+    }
+  }, [searchQuery, refetch]);
 
   return (
     <div className="min-h-screen bunny-dark static-triangles">