Implement cache management

src/components/rides/RideCard.tsx

@@ -1,10 +1,13 @@
 import { useNavigate } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Star, MapPin, Clock, Zap, FerrisWheel, Waves, Theater, Train, ArrowUp, CheckCircle, Calendar, Hammer, XCircle } from 'lucide-react';
 import { MeasurementDisplay } from '@/components/ui/measurement-display';
 import { Ride } from '@/types/database';
 import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
+import { queryKeys } from '@/lib/queryKeys';
+import { supabase } from '@/integrations/supabase/client';
 
 interface RideCardProps {
   ride: Ride;
@@ -15,11 +18,47 @@ interface RideCardProps {
 
 export function RideCard({ ride, showParkName = true, className, parkSlug }: RideCardProps) {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
   const handleRideClick = () => {
     const slug = parkSlug || ride.park?.slug;
     navigate(`/parks/${slug}/rides/${ride.slug}`);
   };
+  
+  // Prefetch ride detail data on hover
+  const handleMouseEnter = () => {
+    const slug = parkSlug || ride.park?.slug;
+    if (!slug) return;
+    
+    // Prefetch ride detail page data
+    queryClient.prefetchQuery({
+      queryKey: queryKeys.rides.detail(slug, ride.slug),
+      queryFn: async () => {
+        const { data } = await supabase
+          .from('rides')
+          .select('*')
+          .eq('slug', ride.slug)
+          .single();
+        return data;
+      },
+      staleTime: 5 * 60 * 1000,
+    });
+    
+    // Prefetch ride photos (first 10)
+    queryClient.prefetchQuery({
+      queryKey: queryKeys.photos.entity('ride', ride.id),
+      queryFn: async () => {
+        const { data } = await supabase
+          .from('photos')
+          .select('*')
+          .eq('entity_type', 'ride')
+          .eq('entity_id', ride.id)
+          .limit(10);
+        return data;
+      },
+      staleTime: 5 * 60 * 1000,
+    });
+  };
 
   const getRideIcon = (category: string) => {
     switch (category) {
@@ -61,6 +100,7 @@ export function RideCard({ ride, showParkName = true, className, parkSlug }: Rid
     <Card 
       className={`group overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 hover:shadow-2xl hover:shadow-primary/20 hover:border-primary/30 transition-all duration-300 cursor-pointer hover:scale-[1.02] relative before:absolute before:inset-0 before:rounded-lg before:p-[1px] before:bg-gradient-to-br before:from-primary/20 before:via-transparent before:to-accent/20 before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300 ${className}`}
       onClick={handleRideClick}
+      onMouseEnter={handleMouseEnter}
     >
       <div className="relative overflow-hidden">
         {/* Image/Icon Section */}