Add LoadingOverlay and integrate into Generate page

[naheel0]

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.

🚀 BΞYTΞFLʘW | Pull Request Protocol

PR Type: (Choose one: feat | fix | refactor | docs | perf)
Issue Link: Fixes #

---

📝 System Summary

Provide a concise brief of the changes introduced to the stream.

🛠️ Technical Changes

• Logic change in ...
• New UI component added: ...
• Database schema updated: ...

🧪 Quality Assurance (QA)

• Linting: Code style matches the BeyteFlow grid.
• Build: npm run build executed without errors.
• Testing: New logic has been verified and tested.
• Dark Mode: UI is high-contrast and neon-optimized.

🖼️ Visual Evidence

If this PR affects the UI, drop a screenshot or GIF below:

---

📡 Developer Authorization

• I have performed a self-review of my code.
• My changes generate no new warnings in the console.
• I have updated the documentation (if applicable).

Authorized by: @naheel0 @jaseel0
Timestamp: {{ 16/2/2026 }}

---

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
readme-gen-ai	Ready	Preview, Comment	Feb 16, 2026 4:18pm

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

• New Features

  • Added loading overlay with animated terminal-style interface during generation
  • Integrated terminal mockup display on the generation page
  • Search input now displays repository information pre-filled

• Bug Fixes

  • Improved repository name extraction robustness for edge cases

Walkthrough

Three files were modified to introduce a loading overlay component and integrate it into the generate page flow. A new LoadingOverlay component displays animated visual feedback while content loads. The GeneratePageClient page now conditionally renders this overlay based on loading state and passes search input initialization. A metadata string-handling improvement was also applied.

Changes

Cohort / File(s)	Summary
Loading UI Component src/components/Generator/LoadingOverlay.tsx	New React client component with full-screen overlay, animated rings, binary text effects, and metric displays using inline CSS animations and Tailwind styling.
Generate Flow Integration src/app/generate/GeneratePageClient.tsx, src/app/generate/[repo]/page.tsx	Added LoadingOverlay and TerminalMockup imports; SearchInput extended with isLoading and initialValue props; page container repositioned for overlay; repoDisplayName extraction made more robust using slice instead of pop.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• PR #16: Introduces TerminalMockup and Footer components that are now being imported and used in this PR's GeneratePageClient changes.
• PR #17: Modifies the same generate flow pages and SearchInput/TerminalMockup component integration patterns.
• PR #29: Adjusts SearchInput props (initialValue, isLoading) and GeneratePageClient composition in related ways.

Suggested labels

area: frontend

Suggested reviewers

• adithyanmkd

Poem

🐰 A loading screen now gleams with flair,
Animated rings float in the air,
With binary flickers and metrics so bright,
The overlay spins through the night,
While the search input shows what's been done,
A stylish dance till loading is done! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Add LoadingOverlay and integrate into Generate page' directly and clearly summarizes the main changes: introducing a new LoadingOverlay component and integrating it into the Generate page.
Description check	✅ Passed	The description comprehensively covers all changes: introduces the LoadingOverlay component, explains its integration into GeneratePageClient, mentions TerminalMockup import, container positioning adjustments, and the safe change to repoDisplayName extraction.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch loading

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/components/Generator/LoadingOverlay.tsx`:
- Around line 9-17: The typing loop in the LoadingOverlay useEffect resets the
index i to 0 when i > fullText.length, causing slice(0,0) and a blank frame;
update the reset logic in the effect that controls setTerminalText so that when
i exceeds fullText.length you set i = 1 (or explicitly set the text to "" and
add a small pause) instead of 0, ensuring the component (useEffect,
setTerminalText, fullText, and the interval handler) produces a smooth
continuous loop without the flicker.
- Line 20: The div in the LoadingOverlay component uses a non-standard Tailwind
utility `z-100`; replace it with the arbitrary-value syntax `z-[100]` in the
className on the root div (the JSX element inside LoadingOverlay) so Tailwind
applies a z-index of 100 correctly.

🧹 Nitpick comments (1)

src/components/Generator/LoadingOverlay.tsx (1)

82-101: Replace dangerouslySetInnerHTML with Tailwind config or a CSS module.

Static analysis correctly flags dangerouslySetInnerHTML. While the content here is a hardcoded string (no real XSS risk), injecting CSS this way bypasses React's rendering model and is a maintenance smell. The spin keyframe and mix-blend-screen utility already ship with Tailwind — you're re-declaring them. The custom ring-pulse keyframe and animate-spin-slow can be added to your tailwind.config under theme.extend.animation / theme.extend.keyframes, which is the idiomatic approach.