From 11cff9963eb44b616b0898963dce28efd0ffe6f0 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Mon, 10 Nov 2025 19:43:22 +0000
Subject: [PATCH] completionId: cgen-db5b4f2830ae47cba3b2479ba3eff2ed

cgen-db5b4f2830ae47cba3b2479ba3eff2ed
---
 client/pages/DevLink.tsx | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/client/pages/DevLink.tsx b/client/pages/DevLink.tsx
index 10094033..21665e5e 100644
--- a/client/pages/DevLink.tsx
+++ b/client/pages/DevLink.tsx
@@ -4,9 +4,38 @@ import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Users, Briefcase, Star, Zap } from "lucide-react";
 import { useNavigate } from "react-router-dom";
+import { useEffect, useState, useRef } from "react";
+import LoadingScreen from "@/components/LoadingScreen";
+import { aethexToast } from "@/lib/aethex-toast";
 
 export default function DevLink() {
   const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(true);
+  const toastShownRef = useRef(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+      if (!toastShownRef.current) {
+        aethexToast.system("Dev-Link platform loaded");
+        toastShownRef.current = true;
+      }
+    }, 900);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (isLoading) {
+    return (
+      <LoadingScreen
+        message="Loading Dev-Link Platform..."
+        showProgress={true}
+        duration={900}
+        accentColor="from-cyan-500 to-cyan-400"
+        armLogo="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F9a96b43cbd7b49bb9d5434580319c793?format=webp&width=800"
+      />
+    );
+  }
   return (
     <Layout>
       <div className="relative min-h-screen bg-black text-white overflow-hidden">