Added Image prefetching

src/components/PrefetchedImage.tsx

@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+import ImageSkeleton from "./ui/Skeletons/ImageSkeleton";
+
+interface PrefetchedImageProps {
+    src: string;
+    alt: string;
+    className?: string;
+}
+
+export default function PrefetchedImage({ src, alt, className }: PrefetchedImageProps) {
+    const [loaded, setLoaded] = useState(false);
+
+    useEffect(() => {
+        const img = new Image();
+        img.src = src;
+        img.onload = () => setLoaded(true);
+    }, [src]);
+
+    if (!loaded) return <ImageSkeleton />
+
+    return <img src={src} alt={alt} className={className} />;
+}

src/components/ui/Skeletons/ImageSkeleton.tsx

@@ -0,0 +1,27 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { useTheme } from "@/contexts/ThemeContext";
+
+export default function SkeletonCard() {
+    const { theme } = useTheme();
+
+    const skeletonColor = theme === "light" ? "bg-gray-300" : "bg-gray-700";
+    const bgGradient =
+        theme === "light"
+            ? "bg-gradient-to-r from-white to-gray-200"
+            : "bg-gradient-to-r from-gray-900 to-gray-700";
+
+    return (
+        <div
+            className={`flex flex-col md:flex-row min-h-screen justify-center items-center w-full pt-32 md:pt-20 ${bgGradient} gap-8 px-4`}
+        >
+            <Skeleton
+                className={`${skeletonColor}
+                h-48 w-3/4  
+                sm:h-64 sm:w-3/4   
+                md:h-80 md:w-1/2  
+                lg:h-96 lg:w-1/2  
+                rounded-xl`}
+            />
+        </div>
+    );
+}

src/hooks/useImagePrefetch.ts

@@ -0,0 +1,10 @@
+import { useEffect } from "react";
+
+export function useImagePrefetch(urls: string[]) {
+  useEffect(() => {
+    urls.forEach((src) => {
+      const img = new Image();
+      img.src = src;
+    });
+  }, [urls]);
+}

src/layouts/MainLayout.tsx

@@ -3,7 +3,8 @@ import Footer from "@/components/Footer";
 import { Outlet, useLocation } from "react-router-dom";
 import { ThemeProvider } from "@/contexts/ThemeContext";
 import { Suspense, useEffect } from "react";
-import SkeletonCard from "@/pages/SkeletonCard";
+import { useImagePrefetch } from "@/hooks/useImagePrefetch";
+import SkeletonCard from "@/components/ui/Skeletons/SkeletonCard";
 
 function ScrollToTop() {
   const { pathname } = useLocation();
@@ -14,6 +15,15 @@ function ScrollToTop() {
 }
 
 function MainLayout() {
+  useImagePrefetch([
+    "/svg/pagessvg/bookingpage.svg",
+    "/svg/pagessvg/buspage.svg",
+    "/svg/pagessvg/trainpage.svg",
+    "/svg/pagessvg/hotelpage.svg",
+    "/svg/pagessvg/holidaypage.svg",
+    "/svg/pagessvg/flightpage.svg",
+    "/svg/pagessvg/cabpage.svg",
+  ]);
   return (
     <ThemeProvider>
       <ScrollToTop />

src/pages/Booking.tsx

@@ -1,3 +1,4 @@
+import PrefetchedImage from "@/components/PrefetchedImage";
 import { useTheme } from "@/contexts/ThemeContext";
 
 export default function Booking() {
@@ -13,7 +14,7 @@ export default function Booking() {
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-4 md:p-8">
-        <img
+        <PrefetchedImage
           src="/svg/pagessvg/bookingpage.svg"
           alt="Manage Booking"
           className="w-full max-w-xs sm:max-w-sm md:max-w-full h-auto object-contain"

src/pages/Bus.tsx

@@ -1,3 +1,4 @@
+import PrefetchedImage from "@/components/PrefetchedImage";
 import { useTheme } from "@/contexts/ThemeContext";
 
 export default function Bus() {
@@ -13,7 +14,7 @@ export default function Bus() {
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-8">
-        <img
+        <PrefetchedImage
           src="/svg/pagessvg/buspage.svg"
           alt="Bus Booking"
           className="w-full max-w-md md:max-w-full h-auto object-contain"

src/pages/Cabs.tsx

@@ -1,3 +1,4 @@
+import PrefetchedImage from "@/components/PrefetchedImage";
 import { useTheme } from "@/contexts/ThemeContext";
 
 export default function Cabs() {
@@ -13,7 +14,7 @@ export default function Cabs() {
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-8">
-        <img
+        <PrefetchedImage
           src="/svg/pagessvg/cabpage.svg"
           alt="Cab Service"
           className="w-full max-w-md md:max-w-full h-auto object-contain"

src/pages/Flight.tsx

@@ -1,3 +1,4 @@
+import PrefetchedImage from "@/components/PrefetchedImage";
 import { useTheme } from "@/contexts/ThemeContext";
 
 export default function Flight() {
@@ -13,7 +14,7 @@ export default function Flight() {
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-8">
-        <img
+        <PrefetchedImage
           src="/svg/pagessvg/flightpage.svg"
           alt="Flight Booking"
           className="w-full max-w-md md:max-w-full h-auto object-contain"

src/pages/Holidays.tsx

@@ -1,3 +1,4 @@
+import PrefetchedImage from "@/components/PrefetchedImage";
 import { useTheme } from "@/contexts/ThemeContext";
 
 export default function Holidays() {
@@ -13,7 +14,7 @@ export default function Holidays() {
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-8">
-        <img
+        <PrefetchedImage
           src="/svg/pagessvg/holidaypage.svg"
           alt="Holiday planning"
           className="w-full max-w-md md:max-w-full h-auto object-contain"

src/pages/Hotel.tsx

@@ -1,3 +1,4 @@
+import PrefetchedImage from "@/components/PrefetchedImage";
 import { useTheme } from "@/contexts/ThemeContext";
 
 export default function Hotel() {
@@ -13,7 +14,7 @@ export default function Hotel() {
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-8">
-        <img
+        <PrefetchedImage
           src="/svg/pagessvg/hotelpage.svg"
           alt="Hotel Booking"
           className="w-full max-w-md md:max-w-full h-auto object-contain"

src/pages/Trains.tsx

@@ -1,3 +1,4 @@
+import PrefetchedImage from "@/components/PrefetchedImage";
 import { useTheme } from "@/contexts/ThemeContext";
 
 export default function Trains() {
@@ -13,7 +14,7 @@ export default function Trains() {
         }`}
     >
       <div className="w-full md:w-1/2 flex justify-center items-center p-8">
-        <img
+        <PrefetchedImage
           src="/svg/pagessvg/trainpage.svg"
           alt="Train Booking"
           className="w-full max-w-md md:max-w-full h-auto object-contain"