Skip to content

feat: add loader when user getting validated and generating preview#145

Merged
vansh-codes merged 4 commits into
vansh-codes:masterfrom
palchhinparihar:feat/add-loader
Nov 15, 2025
Merged

feat: add loader when user getting validated and generating preview#145
vansh-codes merged 4 commits into
vansh-codes:masterfrom
palchhinparihar:feat/add-loader

Conversation

@palchhinparihar

Copy link
Copy Markdown
Contributor

📄 Description

This PR adds a custom loader that is displayed during user validation and while the preview is being generated. The loader improves user experience by providing clear visual feedback during these asynchronous operations, preventing confusion when the UI temporarily pauses for processing.

Included in this update:

  • Added a custom (non-Lottie) loader component.
  • Displayed the loader during user validation.
  • Displayed the loader while generating the preview.
  • Ensured the loader's visibility is correctly tied to the async process states.
  • Improved perceived performance and clarity during longer validation or preview processes.

Motivation:
Previously, there was no visual indicator when user validation or preview generation was happening, making the UI feel unresponsive. Introducing this loader enhances usability and transparency.

Testing:

  • Verified the loader appears during user validation.
  • Verified it appears during preview generation.
  • Confirmed it hides properly after both tasks complete.
  • Tested responsiveness across different screen sizes.

🔗 Related Issues

Fixes #138


🖼️ Screenshots (if applicable)

Screenshot 2025-11-15 122006

🧩 Type of Change

Select the type of change your PR introduces (check all that apply):

  • 🐛 Bug Fix
  • ✨ New Feature
  • ⚡ Enhancement / Optimization
  • 🧰 Refactoring
  • 🧾 Documentation Update
  • 🔧 Other (please specify): ____________

✅ Checklist

Before submitting your PR, please confirm the following:

  • I have performed a self-review of my code.
  • I have commented my code, particularly in hard-to-understand areas.
  • I have added or updated relevant documentation.
  • My changes do not break any existing functionality.
  • I have tested my changes locally and they work as expected.
  • I have linked all relevant issues (if any).

Let me know for any change.

Thank you.

Copilot AI review requested due to automatic review settings November 15, 2025 06:58
@vercel

vercel Bot commented Nov 15, 2025

Copy link
Copy Markdown

@palchhinparihar is attempting to deploy a commit to the vansh-codes1's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions

Copy link
Copy Markdown
Contributor

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

@palchhinparihar

Copy link
Copy Markdown
Contributor Author

hi @vansh-codes, please review both this and #140. :)

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds a custom loader component to improve user experience during asynchronous operations (user validation and preview generation). The changes include a new Loader component, loading state management in both the home and preview pages, and a refactoring of the preview page to use descriptor files for better maintainability.

Key Changes

  • Created a reusable Loader component with a spinner and customizable message
  • Added loading states during GitHub username validation and preview image generation
  • Refactored preview page controls into separate descriptor files (exportTools.js, selectTools.js, checkboxTools.js)

Reviewed Changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 8 comments.

Show a summary per file
File Description
src/components/Loader.jsx New loader component with spinner animation and message display
src/pages/Home.jsx Integrated loader during username validation with timeout logic
src/app/[username]/page.jsx Added loader for image generation and refactored UI controls
src/app/[username]/exportTools.js New descriptor file for export button configuration
src/app/[username]/selectTools.js New descriptor file for select dropdown configuration
src/app/[username]/checkboxTools.js New descriptor file for checkbox configuration
package.json Added lottie-react dependency

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread package.json Outdated
Comment thread src/pages/Home.jsx
Comment thread src/pages/Home.jsx
Comment thread src/app/[username]/page.jsx
Comment thread src/components/Loader.jsx
Comment thread src/app/[username]/page.jsx
Comment thread src/app/[username]/exportTools.js
Comment thread src/pages/Home.jsx
@vansh-codes vansh-codes added the wocs Contributors under WOC label Nov 15, 2025

@vansh-codes vansh-codes left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do remove the extra installed library which is not needed to get this PR merged!

Comment thread package.json Outdated
@vansh-codes vansh-codes merged commit bbd67bf into vansh-codes:master Nov 15, 2025
1 check failed
@vansh-codes vansh-codes added the level 2 awards 5 points label Nov 15, 2025
@palchhinparihar

Copy link
Copy Markdown
Contributor Author

oh before merging, you had to add the label, or else it won't come under my contribution.

@palchhinparihar palchhinparihar deleted the feat/add-loader branch November 15, 2025 14:28
@arushi2610

Copy link
Copy Markdown

The points for this PR have been updated. The changes will be reflected in about 30 minutes.

@vansh-codes

Copy link
Copy Markdown
Owner

@palchhinparihar yes I'm aware about it, missed it for this PR bymistake

Hopefully it must be resolved by now?
Thanks @arushi2610 !!

@palchhinparihar

Copy link
Copy Markdown
Contributor Author

It is resolved! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

level 2 awards 5 points wocs Contributors under WOC

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feat: Add loader in Home Page when username is getting validated

4 participants