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

Don't show full-screen notice when fast refresh happens #979

Merged
merged 4 commits into from
Feb 21, 2025

Conversation

kmagiera
Copy link
Member

@kmagiera kmagiera commented Feb 19, 2025

When fast refresh is performed, we'd show a full screen overlay. This was very distracting especially given other tools doesn't do that. This PR introduces some changes to the way we inform about fast refresh:

  1. We no longer show the full screen overlay.
  2. When fast refresh is ongoing and user tries to interact with the app, only then we block the interaction and show full screen notice. This is to prevent accidentally hitting the in-between state when they may expect the code to already be updated while it is still reloading.
  3. We show a tiny notification in bottom left corner when fast refresh is ongoing, but only do it when it's running for at least half a second. Most of reloads are much faster and there's no point in showing this information
  4. After successful reload we display a small notice in the same place that says the reload was successful.

Loading popover:
image
image

Screen overlay when attempting to click on it:
image

How Has This Been Tested:

  1. Run test app
  2. Try editin app's code to force fast refresh -> see the notice show up for a bit over a second after successful refresh
  3. Add some very large import (import 'typescript/lib/typingsInstaller'; is almost 2MB file that takes several seconds to fast refresh). Make sure the "loading" notice is show and also see the overlay when interacting with the screen while it is happening.

- Implement a new component to show Fast Refresh status with delayed visibility
- Add CSS styling for the refresh indicator with animations
- Update Preview component to integrate the new indicator
- Enhance user feedback during project refreshing state
Copy link

vercel bot commented Feb 19, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
radon-ide ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 21, 2025 9:47am

Copy link
Contributor

@maciekstosio maciekstosio left a comment

Choose a reason for hiding this comment

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

I wonder if the tooltip part shouldn't be something separate that we could use also for other notifications. On the other hand, if we want to post more messages, maybe we should use build-in vscode notifications. Other then that it looks ok.

@kmagiera kmagiera merged commit 8e02bd9 into main Feb 21, 2025
4 checks passed
@kmagiera kmagiera deleted the kmagiera/fast-refresh-indicator branch February 21, 2025 10:03
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