Skip to content

feat(ui): implement profile scanning and analysis loading screen (#272)#281

Open
PranavAgarkar07 wants to merge 1 commit into
Coder-s-OG-s:mainfrom
PranavAgarkar07:fix/272-implement-profile-scanning-loading-screen
Open

feat(ui): implement profile scanning and analysis loading screen (#272)#281
PranavAgarkar07 wants to merge 1 commit into
Coder-s-OG-s:mainfrom
PranavAgarkar07:fix/272-implement-profile-scanning-loading-screen

Conversation

@PranavAgarkar07

Copy link
Copy Markdown

Summary

Adds a Step 2 onboarding loading screen that gives users real-time visual feedback while their GitHub profile is being analyzed after installing the MergeShip app.

Type of Change

  • Bug fix
  • New feature
  • UI / UX improvement
  • Refactor
  • Documentation
  • Other

Related Issue

Closes #272

What was changed?

New files

  • src/app/onboarding/analyze/page.tsx — Server component that gates auth, reads the user's GitHub avatar and handle from Supabase identity, skips already-onboarded users (redirects to /dashboard), and renders the client component
  • src/app/onboarding/analyze/onboarding-client.tsx — Full client component with animated scanning UI:
    • Header with MergeShip logo
    • "Step 2 of 3" indicator with neon-green progress bar (animates from 50% → 100%)
    • User's actual GitHub avatar in a glowing concentric ring box (with fallback initials)
    • Glassmorphism status card with "SCANNING" badge, randomized process ID, and 6 animated task rows (3 pre-completed, 1 active, 2 pending → sequential completion)
    • Auto-redirects to /dashboard after ~5s

Modified files

  • tailwind.config.js — Added neon-green (#00FF87) color palette and scanning keyframes (scanAvatar, scanProgress, scanPulse)
  • src/middleware.ts — Added /onboarding to GATE_BYPASS_PREFIXES so the install gate does not block this route
  • src/app/globals.css — Added .scan-avatar-ring (concentric glow rings), .scan-line (sweeping animation), .scan-card (dark glassmorphism panel)

Approach

The UI shows a simulated scanning sequence matching the issue mockup. The first 3 tasks appear pre-completed (Reading public profile, Fetching repo history, Counting merged PRs), then the remaining 3 tasks complete sequentially with smooth framer-motion transitions. The user's real GitHub avatar is displayed from their Supabase identity data. After all tasks resolve, the page redirects to /dashboard.

Screenshots

N/A — UI matches the mockup referenced in the issue. The implementation uses the actual user's GitHub avatar (fetched from Supabase session OAuth identity) rather than a placeholder.

Checklist

  • My code follows the project structure and conventions
  • I tested this locally (npm run dev)
  • No hardcoded secrets or credentials
  • I have updated documentation if needed

@vercel

vercel Bot commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

@PranavAgarkar07 is attempting to deploy a commit to the codersogs-3057's projects Team on Vercel.

A member of the Team first needs to authorize it.

@vercel

vercel Bot commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

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

Project Deployment Actions Updated (UTC)
mergeship Ready Ready Preview, Comment Jun 9, 2026 1:40pm

@Ayush-Patel-56

Copy link
Copy Markdown
Collaborator

can't able to see the changes, can you please share screenshots or a recording of the fix ?

@Ayush-Patel-56 Ayush-Patel-56 added the Needs author reply Author need to reply label Jun 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Needs author reply Author need to reply

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UI/UX] - Implement profile scanning and analysis loading screen

2 participants