Enhance User Experience with Loading States and Markdown Preview #20
Description
Issue Type: ✨ Feature Request / UX Improvement
Priority: High
Status: Ready for Implementation
📝 Problem Statement
Currently, when a user clicks "Generate," there is no visual feedback indicating that the backend is processing the repository data and communicating with the Gemini API. Furthermore, the current implementation returns raw JSON/Markdown text, which forces the user to manually copy-paste it elsewhere to see the final visual result.
🚀 Proposed Solution
We need to implement a two-part UI enhancement to bridge the gap between "Request" and "Result."
- Loading Animation (State Management)
Trigger: Activate immediately upon clicking the "Generate" button.
UI Component: Implement a centered, high-fidelity loading spinner or a skeleton screen that mirrors the README structure.
Messaging: Display rotating status messages (e.g., "Fetching repository manifest...", "Analyzing tech stack...", "Architecting README...").
- Live Markdown Preview
Component: Integrate a Markdown renderer (like react-markdown or lucide-react for icons) below the input area.
Features:
Tabbed View: A "Preview" tab (rendered HTML) and a "Raw" tab (Markdown text).
Copy to Clipboard: A dedicated button to copy the raw markdown.
Syntax Highlighting: Ensure code blocks within the generated README are styled correctly.
🛠 Technical Specifications
Frontend State: Use a loading boolean state in the /generate page component.
API Integration: Ensure the NextResponse from @src/app/api/generate/route.ts is handled within a try/catch/finally block to disable the loader even if the request fails.
Refinement: Ensure the preview container matches the dark-mode aesthetic shown in the current UI (reference: image_fff9be.png).
✅ Acceptance Criteria
=>Button enters a disabled state during generation to prevent duplicate API calls.
=> A smooth CSS transition/animation is visible while loading === true.
=>The generated README is automatically rendered as HTML in a "Preview" section.
=> "Copy to Clipboard" functionality works and provides a small "Copied!" tooltip.
