completionId: cgen-5ce1f9b7be544c518878edc43d6e4f5e

cgen-5ce1f9b7be544c518878edc43d6e4f5e

client/components/LoadingScreen.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
+import AeThexOSLogo from "./AeThexOSLogo";
 
 interface LoadingScreenProps {
   message?: string;
@@ -9,6 +10,7 @@ interface LoadingScreenProps {
   duration?: number;
   accentColor?: string;
   armLogo?: string;
+  showOSLogo?: boolean;
 }
 
 export default function LoadingScreen({
@@ -19,6 +21,7 @@ export default function LoadingScreen({
   duration = 3000,
   accentColor = "from-aethex-500 to-neon-blue",
   armLogo,
+  showOSLogo = true,
 }: LoadingScreenProps) {
   const [progress, setProgress] = useState(0);
   const [currentMessage, setCurrentMessage] = useState(message);
@@ -85,10 +88,22 @@ export default function LoadingScreen({
     <div className={containerClasses}>
       <div className="flex items-center justify-center min-h-full">
         <div className="text-center space-y-8 max-w-md mx-auto p-8">
-          {/* Logo Animation */}
+          {/* OS Logo with Arm Logo Overlay */}
           <div className="flex justify-center">
             <div className="relative">
-              <div className={`h-16 w-16 rounded-lg bg-gradient-to-br ${
+              {/* OS Frame Background */}
+              {showOSLogo && (
+                <div className="absolute -inset-4 animate-pulse-glow">
+                  <AeThexOSLogo
+                    size="xl"
+                    variant="default"
+                    className="opacity-30"
+                  />
+                </div>
+              )}
+
+              {/* Arm Logo or Default */}
+              <div className={`relative h-16 w-16 rounded-lg bg-gradient-to-br ${
                 accentColor.includes("yellow")
                   ? "from-yellow-400 to-yellow-500"
                   : accentColor.includes("green")
@@ -101,14 +116,19 @@ export default function LoadingScreen({
                   ? "from-cyan-400 to-cyan-500"
                   : "from-aethex-400 to-neon-blue"
               } flex items-center justify-center animate-pulse-glow p-2`}>
-                <img
-                  src={
-                    armLogo ||
-                    "https://docs.aethex.tech/~gitbook/image?url=https%3A%2F%2F1143808467-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Forganizations%252FDhUg3jal6kdpG645FzIl%252Fsites%252Fsite_HeOmR%252Flogo%252FqxDYz8Oj2SnwUTa8t3UB%252FAeThex%2520Origin%2520logo.png%3Falt%3Dmedia%26token%3D200e8ea2-0129-4cbe-b516-4a53f60c512b&width=256&dpr=1&quality=100&sign=6c7576ce&sv=2"
-                  }
-                  alt="Logo"
-                  className="h-full w-full object-contain"
-                />
+                {armLogo ? (
+                  <img
+                    src={armLogo}
+                    alt="Arm Logo"
+                    className="h-full w-full object-contain"
+                  />
+                ) : (
+                  <AeThexOSLogo
+                    size="md"
+                    variant="default"
+                    className="opacity-100"
+                  />
+                )}
               </div>
               <div className={`absolute -inset-2 rounded-lg bg-gradient-to-r ${accentColor} opacity-30 blur animate-pulse`}></div>
             </div>