From e5fcc966a759c07156aa7195c99ac7f03868c361 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Thu, 13 Nov 2025 05:23:55 +0000
Subject: [PATCH] completionId: cgen-d5d53101ba494eb393081fa15cce73b4

cgen-d5d53101ba494eb393081fa15cce73b4
---
 client/components/PageTransition.tsx | 36 +++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/client/components/PageTransition.tsx b/client/components/PageTransition.tsx
index a7303c5e..00ed2654 100644
--- a/client/components/PageTransition.tsx
+++ b/client/components/PageTransition.tsx
@@ -79,25 +79,45 @@ const getArmConfig = (pathname: string): ArmConfig => {
 
 export default function PageTransition({ children }: PageTransitionProps) {
   const [visible, setVisible] = useState(true);
+  const [isTransitioning, setIsTransitioning] = useState(false);
   const location = useLocation();
   const config = getArmConfig(location.pathname);
 
   useEffect(() => {
+    setIsTransitioning(true);
     setVisible(false);
-    const timer = setTimeout(() => setVisible(true), 800);
-    return () => clearTimeout(timer);
+
+    const transitionTimer = setTimeout(() => {
+      setVisible(true);
+      setIsTransitioning(false);
+    }, 800);
+
+    return () => clearTimeout(transitionTimer);
   }, [location.pathname]);
 
   return (
     <>
       {!visible && (
-        <LoadingScreen
-          message={config.message}
-          variant="overlay"
-          accentColor={config.accentColor}
-          armLogo={config.armLogo}
-        />
+        <div className="fixed inset-0 z-50">
+          <LoadingScreen
+            message={config.message}
+            variant="overlay"
+            accentColor={config.accentColor}
+            armLogo={config.armLogo}
+            showOSLogo={true}
+          />
+
+          {/* OS-style Terminal Boot Text (optional decorative element) */}
+          {isTransitioning && (
+            <div className="absolute bottom-12 left-0 right-0 flex justify-center">
+              <div className="text-xs text-muted-foreground font-mono opacity-60 animate-pulse">
+                &gt; {config.bootMessage}...
+              </div>
+            </div>
+          )}
+        </div>
       )}
+
       <div
         className={`transition-opacity duration-300 ease-out transform-gpu will-change-[opacity] ${visible ? "opacity-100" : "opacity-0"}`}
       >