From fc5e33e10daa9cc59bddf53a3fc6517fe08c4bcc Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Tue, 5 Aug 2025 22:55:09 +0000
Subject: [PATCH] Create page transition wrapper component

cgen-f65b6f59c79a4af9a621096a3f7e4a19
---
 client/components/PageTransition.tsx | 40 ++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 client/components/PageTransition.tsx

diff --git a/client/components/PageTransition.tsx b/client/components/PageTransition.tsx
new file mode 100644
index 00000000..39010642
--- /dev/null
+++ b/client/components/PageTransition.tsx
@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import LoadingScreen from "./LoadingScreen";
+
+interface PageTransitionProps {
+  children: React.ReactNode;
+}
+
+export default function PageTransition({ children }: PageTransitionProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+  const location = useLocation();
+
+  useEffect(() => {
+    setIsLoading(true);
+    setIsVisible(false);
+    
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+      setIsVisible(true);
+    }, 600);
+
+    return () => clearTimeout(timer);
+  }, [location.pathname]);
+
+  return (
+    <>
+      {isLoading && (
+        <LoadingScreen 
+          message="Transitioning..." 
+          variant="overlay" 
+          size="md"
+        />
+      )}
+      <div className={`transition-all duration-500 ${isVisible ? 'animate-fade-in' : 'opacity-0'}`}>
+        {children}
+      </div>
+    </>
+  );
+}