From b2a78ee8369dd26fbcf6303673fffae134b53782 Mon Sep 17 00:00:00 2001
From: Naheel Muhammed <naheelmuhammedpk@gmail.com>
Date: Mon, 16 Feb 2026 21:46:35 +0530
Subject: [PATCH 1/2] Add LoadingOverlay and integrate into Generate page

Introduce a new LoadingOverlay client component (complex animated UI with rings, terminal text, and metrics) and wire it into GeneratePageClient to render when isLoading is true. Also import TerminalMockup into the page and adjust container to relative to allow overlay stacking. Minor safe-change in src/app/generate/[repo]/page.tsx: update repoDisplayName extraction to use slice(-1)[0] ?? repoName for safer splitting.

Co-Authored-By: jaseel0 <225665919+jaseel0@users.noreply.github.com>
---
 src/app/generate/GeneratePageClient.tsx     | 15 +++-
 src/app/generate/[repo]/page.tsx            |  4 +-
 src/components/Generator/LoadingOverlay.tsx | 96 +++++++++++++++++++++
 3 files changed, 110 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Generator/LoadingOverlay.tsx

diff --git a/src/app/generate/GeneratePageClient.tsx b/src/app/generate/GeneratePageClient.tsx
index 40ab6f9..3cf0748 100644
--- a/src/app/generate/GeneratePageClient.tsx
+++ b/src/app/generate/GeneratePageClient.tsx
@@ -4,10 +4,12 @@ import { Navbar } from "@/components/layout/Navbar";
 import { Footer } from "@/components/layout/Footer";
 import { SearchInput } from "@/components/Generator/SearchInput";
 import { MarkdownPreview } from "@/components/Generator/MarkdownPreview";
+import { LoadingOverlay } from "@/components/Generator/LoadingOverlay"; 
 import { navLinks } from "@/constants/navLinks";
+import { TerminalMockup } from "@/components/sections/TerminalMockup";
 
 interface GeneratePageProps {
-  repoSlug?: string; // Optional pre-filled repo from server-side route
+  repoSlug?: string; 
 }
 
 export default function GeneratePageClient({ repoSlug }: GeneratePageProps) {
@@ -66,8 +68,14 @@ export default function GeneratePageClient({ repoSlug }: GeneratePageProps) {
   };
 
   return (
-    <div className="min-h-screen bg-black text-white">
+    <div className="relative min-h-screen bg-black text-white">
+      {/* UI LOADING OVERLAY 
+         Renders on top of everything when isLoading is true 
+      */}
+      {isLoading && <LoadingOverlay />}
+
       <Navbar links={navLinks} />
+      
       <main className="pt-40 pb-20 px-4 max-w-6xl mx-auto">
         <SearchInput
           onGenerate={handleGenerate}
@@ -77,7 +85,8 @@ export default function GeneratePageClient({ repoSlug }: GeneratePageProps) {
         />
         <MarkdownPreview content={markdown} />
       </main>
+      <TerminalMockup/>
       <Footer />
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/generate/[repo]/page.tsx b/src/app/generate/[repo]/page.tsx
index e388230..f3205ff 100644
--- a/src/app/generate/[repo]/page.tsx
+++ b/src/app/generate/[repo]/page.tsx
@@ -12,8 +12,8 @@ export async function generateMetadata({
   params,
 }: PageProps): Promise<Metadata> {
   const resolvedParams = await params;
-  const repoName = resolvedParams.repo; // full repo slug like "facebook/react"
-  const repoDisplayName = repoName.split("/").pop(); // e.g., "react"
+  const repoName = resolvedParams.repo; 
+  const repoDisplayName = repoName.split("/").slice(-1)[0] ?? repoName; 
 
   return {
     title: `AI-Generated README for ${repoDisplayName} | ReadmeGenAI`,
diff --git a/src/components/Generator/LoadingOverlay.tsx b/src/components/Generator/LoadingOverlay.tsx
new file mode 100644
index 0000000..3017e1b
--- /dev/null
+++ b/src/components/Generator/LoadingOverlay.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+
+export const LoadingOverlay = () => {
+  const [terminalText, setTerminalText] = useState("");
+  const fullText = "INITIALIZING_NEURAL_ENGINE... [OK]";
+
+  useEffect(() => {
+    let i = 0;
+    const interval = setInterval(() => {
+      setTerminalText(fullText.slice(0, i));
+      i++;
+      if (i > fullText.length) i = 0;
+    }, 100);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="fixed inset-0 z-100 flex flex-col items-center justify-center bg-[#050505] font-mono">
+      {/* BACKGROUND GRID EFFECT */}
+      <div className="absolute inset-0 opacity-10" 
+           style={{ backgroundImage: 'linear-gradient(#333 1px, transparent 1px), linear-gradient(90deg, #333 1px, transparent 1px)', backgroundSize: '40px 40px' }}>
+      </div>
+
+      {/* RING CONTAINER */}
+      <div className="relative flex h-64 w-64 items-center justify-center">
+        {/* Chromatic Orbiting Rings */}
+        <div className="absolute h-36 w-36 rounded-full border border-red-500/40 mix-blend-screen blur-[2px] animate-[ring-pulse_4s_linear_infinite] scale-110"></div>
+        <div className="absolute h-36 w-36 rounded-full border border-emerald-400/40 mix-blend-screen blur-[2px] animate-[ring-pulse_4s_linear_infinite_1s] scale-105"></div>
+        <div className="absolute h-36 w-36 rounded-full border border-indigo-500/40 mix-blend-screen blur-[2px] animate-[ring-pulse_4s_linear_infinite_2s] scale-110"></div>
+        
+        {/* Technical Inner Ring */}
+        <div className="absolute h-28 w-28 rounded-full border border-dashed border-white/20 animate-spin-slow"></div>
+        
+        {/* Core White Ring */}
+        <div className="absolute h-32 w-32 rounded-full border-2 border-white shadow-[0_0_30px_rgba(255,255,255,0.2)] animate-[ring-pulse_3s_ease-in-out_infinite]"></div>
+
+        {/* Binary Data Bits (Decorative) */}
+        <div className="absolute inset-0 flex items-center justify-center opacity-40 text-[8px] text-emerald-500 pointer-events-none">
+            <div className="animate-pulse">01011001</div>
+        </div>
+      </div>
+
+      {/* CODING VIBE TEXT ELEMENTS */}
+      <div className="mt-8 flex flex-col items-center gap-4 z-10">
+        <div className="flex flex-col items-center">
+            <p className="text-xs tracking-[0.5em] text-zinc-500 uppercase mb-1">
+                System Status
+            </p>
+            <div className="flex items-baseline gap-2">
+                <span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span>
+                <p className="text-xl font-bold tracking-tighter text-white">
+                    {terminalText}<span className="animate-bounce">_</span>
+                </p>
+            </div>
+        </div>
+
+        {/* DATA METRICS FOOTER */}
+        <div className="mt-4 grid grid-cols-3 gap-8 text-[10px] text-zinc-600 border-t border-zinc-800 pt-4 uppercase tracking-widest">
+            <div className="flex flex-col items-center">
+                <span>CPU</span>
+                <span className="text-emerald-400">88.4%</span>
+            </div>
+            <div className="flex flex-col items-center border-x border-zinc-800 px-8">
+                <span>MEM</span>
+                <span className="text-indigo-400">12GB</span>
+            </div>
+            <div className="flex flex-col items-center">
+                <span>PING</span>
+                <span className="text-red-400">14MS</span>
+            </div>
+        </div>
+      </div>
+
+      <style dangerouslySetInnerHTML={{ __html: `
+        @keyframes ring-pulse {
+          0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.3; }
+          50% { transform: scale(1.1) rotate(180deg); opacity: 0.7; }
+        }
+        .animate-spin-slow {
+          animation: spin 10s linear infinite;
+        }
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        .mix-blend-screen {
+          mix-blend-mode: screen;
+        }
+      `}} />
+    </div>
+  );
+};
+
+export default LoadingOverlay;
\ No newline at end of file

From 9e04c0645185a04d5a6d29718746cd7a3fbe5620 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 16 Feb 2026 16:18:09 +0000
Subject: [PATCH 2/2] [autofix.ci] apply automated fixes

---
 src/app/generate/GeneratePageClient.tsx     | 10 +--
 src/app/generate/[repo]/page.tsx            |  4 +-
 src/components/Generator/LoadingOverlay.tsx | 70 ++++++++++++---------
 3 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/src/app/generate/GeneratePageClient.tsx b/src/app/generate/GeneratePageClient.tsx
index 3cf0748..a857644 100644
--- a/src/app/generate/GeneratePageClient.tsx
+++ b/src/app/generate/GeneratePageClient.tsx
@@ -4,12 +4,12 @@ import { Navbar } from "@/components/layout/Navbar";
 import { Footer } from "@/components/layout/Footer";
 import { SearchInput } from "@/components/Generator/SearchInput";
 import { MarkdownPreview } from "@/components/Generator/MarkdownPreview";
-import { LoadingOverlay } from "@/components/Generator/LoadingOverlay"; 
+import { LoadingOverlay } from "@/components/Generator/LoadingOverlay";
 import { navLinks } from "@/constants/navLinks";
 import { TerminalMockup } from "@/components/sections/TerminalMockup";
 
 interface GeneratePageProps {
-  repoSlug?: string; 
+  repoSlug?: string;
 }
 
 export default function GeneratePageClient({ repoSlug }: GeneratePageProps) {
@@ -75,7 +75,7 @@ export default function GeneratePageClient({ repoSlug }: GeneratePageProps) {
       {isLoading && <LoadingOverlay />}
 
       <Navbar links={navLinks} />
-      
+
       <main className="pt-40 pb-20 px-4 max-w-6xl mx-auto">
         <SearchInput
           onGenerate={handleGenerate}
@@ -85,8 +85,8 @@ export default function GeneratePageClient({ repoSlug }: GeneratePageProps) {
         />
         <MarkdownPreview content={markdown} />
       </main>
-      <TerminalMockup/>
+      <TerminalMockup />
       <Footer />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/generate/[repo]/page.tsx b/src/app/generate/[repo]/page.tsx
index f3205ff..f272df6 100644
--- a/src/app/generate/[repo]/page.tsx
+++ b/src/app/generate/[repo]/page.tsx
@@ -12,8 +12,8 @@ export async function generateMetadata({
   params,
 }: PageProps): Promise<Metadata> {
   const resolvedParams = await params;
-  const repoName = resolvedParams.repo; 
-  const repoDisplayName = repoName.split("/").slice(-1)[0] ?? repoName; 
+  const repoName = resolvedParams.repo;
+  const repoDisplayName = repoName.split("/").slice(-1)[0] ?? repoName;
 
   return {
     title: `AI-Generated README for ${repoDisplayName} | ReadmeGenAI`,
diff --git a/src/components/Generator/LoadingOverlay.tsx b/src/components/Generator/LoadingOverlay.tsx
index 3017e1b..4335425 100644
--- a/src/components/Generator/LoadingOverlay.tsx
+++ b/src/components/Generator/LoadingOverlay.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 
 export const LoadingOverlay = () => {
   const [terminalText, setTerminalText] = useState("");
@@ -19,9 +19,14 @@ export const LoadingOverlay = () => {
   return (
     <div className="fixed inset-0 z-100 flex flex-col items-center justify-center bg-[#050505] font-mono">
       {/* BACKGROUND GRID EFFECT */}
-      <div className="absolute inset-0 opacity-10" 
-           style={{ backgroundImage: 'linear-gradient(#333 1px, transparent 1px), linear-gradient(90deg, #333 1px, transparent 1px)', backgroundSize: '40px 40px' }}>
-      </div>
+      <div
+        className="absolute inset-0 opacity-10"
+        style={{
+          backgroundImage:
+            "linear-gradient(#333 1px, transparent 1px), linear-gradient(90deg, #333 1px, transparent 1px)",
+          backgroundSize: "40px 40px",
+        }}
+      ></div>
 
       {/* RING CONTAINER */}
       <div className="relative flex h-64 w-64 items-center justify-center">
@@ -29,51 +34,54 @@ export const LoadingOverlay = () => {
         <div className="absolute h-36 w-36 rounded-full border border-red-500/40 mix-blend-screen blur-[2px] animate-[ring-pulse_4s_linear_infinite] scale-110"></div>
         <div className="absolute h-36 w-36 rounded-full border border-emerald-400/40 mix-blend-screen blur-[2px] animate-[ring-pulse_4s_linear_infinite_1s] scale-105"></div>
         <div className="absolute h-36 w-36 rounded-full border border-indigo-500/40 mix-blend-screen blur-[2px] animate-[ring-pulse_4s_linear_infinite_2s] scale-110"></div>
-        
+
         {/* Technical Inner Ring */}
         <div className="absolute h-28 w-28 rounded-full border border-dashed border-white/20 animate-spin-slow"></div>
-        
+
         {/* Core White Ring */}
         <div className="absolute h-32 w-32 rounded-full border-2 border-white shadow-[0_0_30px_rgba(255,255,255,0.2)] animate-[ring-pulse_3s_ease-in-out_infinite]"></div>
 
         {/* Binary Data Bits (Decorative) */}
         <div className="absolute inset-0 flex items-center justify-center opacity-40 text-[8px] text-emerald-500 pointer-events-none">
-            <div className="animate-pulse">01011001</div>
+          <div className="animate-pulse">01011001</div>
         </div>
       </div>
 
       {/* CODING VIBE TEXT ELEMENTS */}
       <div className="mt-8 flex flex-col items-center gap-4 z-10">
         <div className="flex flex-col items-center">
-            <p className="text-xs tracking-[0.5em] text-zinc-500 uppercase mb-1">
-                System Status
+          <p className="text-xs tracking-[0.5em] text-zinc-500 uppercase mb-1">
+            System Status
+          </p>
+          <div className="flex items-baseline gap-2">
+            <span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span>
+            <p className="text-xl font-bold tracking-tighter text-white">
+              {terminalText}
+              <span className="animate-bounce">_</span>
             </p>
-            <div className="flex items-baseline gap-2">
-                <span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span>
-                <p className="text-xl font-bold tracking-tighter text-white">
-                    {terminalText}<span className="animate-bounce">_</span>
-                </p>
-            </div>
+          </div>
         </div>
 
         {/* DATA METRICS FOOTER */}
         <div className="mt-4 grid grid-cols-3 gap-8 text-[10px] text-zinc-600 border-t border-zinc-800 pt-4 uppercase tracking-widest">
-            <div className="flex flex-col items-center">
-                <span>CPU</span>
-                <span className="text-emerald-400">88.4%</span>
-            </div>
-            <div className="flex flex-col items-center border-x border-zinc-800 px-8">
-                <span>MEM</span>
-                <span className="text-indigo-400">12GB</span>
-            </div>
-            <div className="flex flex-col items-center">
-                <span>PING</span>
-                <span className="text-red-400">14MS</span>
-            </div>
+          <div className="flex flex-col items-center">
+            <span>CPU</span>
+            <span className="text-emerald-400">88.4%</span>
+          </div>
+          <div className="flex flex-col items-center border-x border-zinc-800 px-8">
+            <span>MEM</span>
+            <span className="text-indigo-400">12GB</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span>PING</span>
+            <span className="text-red-400">14MS</span>
+          </div>
         </div>
       </div>
 
-      <style dangerouslySetInnerHTML={{ __html: `
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
         @keyframes ring-pulse {
           0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.3; }
           50% { transform: scale(1.1) rotate(180deg); opacity: 0.7; }
@@ -88,9 +96,11 @@ export const LoadingOverlay = () => {
         .mix-blend-screen {
           mix-blend-mode: screen;
         }
-      `}} />
+      `,
+        }}
+      />
     </div>
   );
 };
 
-export default LoadingOverlay;
\ No newline at end of file
+export default LoadingOverlay;