Initial commit

src/components/ImagePreloader/ImagePreloader.module.css

@@ -0,0 +1,36 @@
+/* ImagePreloader component styles */
+.preloader {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* High priority preloading */
+.priority {
+  z-index: 9999;
+}
+
+/* Standard preloading */
+.standard {
+  z-index: 1;
+}
+
+/* Responsive preloading */
+@media (max-width: 768px) {
+  .preloader {
+    /* Reduce preloading on mobile to save bandwidth */
+    display: none;
+  }
+}
+
+/* Print styles */
+@media print {
+  .preloader {
+    display: none;
+  }
+}

src/components/ImagePreloader/ImagePreloader.tsx

@@ -0,0 +1,42 @@
+
+import { useEffect } from "react";
+
+interface ImagePreloaderProps {
+  images: string[];
+  priority?: boolean;
+}
+
+const ImagePreloader = ({ images, priority = false }: ImagePreloaderProps) => {
+  useEffect(() => {
+    if (!images || images.length === 0) return;
+
+    const preloadImages = () => {
+      images.forEach((src) => {
+        if (!src) return;
+        
+        const img = new Image();
+        img.src = src;
+        
+        // Set priority for critical images
+        if (priority) {
+          img.fetchPriority = "high";
+        }
+        
+        // Optional: Add error handling
+        img.onerror = () => {
+          console.warn(`Failed to preload image: ${src}`);
+        };
+      });
+    };
+
+    // Preload images after a short delay to not block initial render
+    const timer = setTimeout(preloadImages, priority ? 0 : 100);
+    
+    return () => clearTimeout(timer);
+  }, [images, priority]);
+
+  // This component doesn't render anything visible
+  return null;
+};
+
+export default ImagePreloader;

src/components/ImagePreloader/index.ts

@@ -0,0 +1 @@
+export { default } from "./ImagePreloader";