Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add build loading awareness in the terminal(#1117) #1118

Merged
merged 3 commits into from
Nov 7, 2024

Conversation

actopas
Copy link
Contributor

@actopas actopas commented Oct 23, 2024

Details

This PR enhances the build process feedback by implementing a loading animation in the terminal. It addresses the issue of unclear build status during development, especially for longer builds or multiple hot reloads.

Specifically, this PR:

  • Adds a loading animation at the start of each build/hot reload process
  • Removes the animation when the build completes (success or failure)
  • Improves visibility of the current build status

This change aims to solve the problem described in issue #1117, where it was difficult to determine if a build was in progress or completed, especially after multiple hot reloads.

I'm open to any feedback or suggestions for improvement. If you have any questions or if there's anything you'd like me to modify, please leave a comment.

Code of Conduct

  • I agree to follow this project's Code of Conduct
  • I agree to license this contribution under the MIT LICENSE
  • I checked the current PR for duplication.

Contacts

  • (OPTIONAL) Discord ID: actopas

actopas and others added 2 commits October 23, 2024 13:30
- Import loading awareness animation for build process
- Start loading animation when build and rebuild starts
- Stop loading animation when build succeeds or fails
Copy link
Contributor

Choose a reason for hiding this comment

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

This is pretty cool!!

Copy link
Contributor

Choose a reason for hiding this comment

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

The current convention is a bit extreme on not using "let" :-?

Can we make a const state like this instead:

const state = {
  loadingInterval: null as NodeJS.Timeout | null,
  isLoading: false,
  dotCount: 0
}

Copy link
Contributor

@louisgv louisgv left a comment

Choose a reason for hiding this comment

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

Looks like a pretty cool feature!

if (isLoading) return
isLoading = true
let dots = 0
const baseString = "🔄 Building"
Copy link
Contributor

Choose a reason for hiding this comment

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

let's pull this outside, since it's a literal string

Comment on lines +87 to +88
if (event.type === "buildFailure") {
stopLoading()
Copy link
Contributor

Choose a reason for hiding this comment

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

nice!

let isLoading = false

export const startLoading = () => {
if (isLoading) return
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: let's use bracket

}

export const stopLoading = () => {
if (!isLoading) return
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: brakcet

- Move state management to a single state object
- Extract LOADING_TEXT to constants
- Add consistent bracket style
@actopas
Copy link
Contributor Author

actopas commented Nov 1, 2024

@louisgv Thanks for the review! I've addressed all the suggestions:

  • ✅ Moved state management to a single state object
  • ✅ Added consistent bracket style for all conditions
  • ✅ Extracted LOADING_TEXT as a constant

Please let me know if there's anything else that needs to be adjusted.

Copy link
Contributor

@louisgv louisgv left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@louisgv louisgv added this pull request to the merge queue Nov 7, 2024
Merged via the queue into PlasmoHQ:main with commit 1041ff0 Nov 7, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants