search

vercel / react-transition-progress

Show a progress bar while React Transitions run
https://react-transition-progress.vercel.app
MIT License
168 stars 17 forks source link

fix: progress bar full width before fading out #12

Open michaellopez opened 3 months ago

michaellopez commented 3 months ago

This PR makes the progress bar reach 100 % when loading is complete before fading out.

I had a bit of trouble with formatting, the codebase doesn't have any consistent style. So I tried my best to match it. Hope it is OK, otherwise let me know.

Fixes #4

AnYiEE commented 3 months ago

I actually used this version, it looks as expected, and there are no issues.

musjj commented 2 months ago

It seems that this causes the progress bar to unnecessarily flash when clicking on links to previously visited, cached pages. Previously, the progress bar will not be shown at all.

AnYiEE commented 2 months ago

It seems that this causes the progress bar to unnecessarily flash when clicking on links to previously visited, cached pages. Previously, the progress bar will not be shown at all.

So there was a problem before. Users should get some kind of feedback for every action. A visited page may load quickly on your device, but it may not load as quickly on my device. I need to know that I clicked on the link and that loading has begun.

michaellopez commented 2 months ago

It seems that this causes the progress bar to unnecessarily flash when clicking on links to previously visited, cached pages. Previously, the progress bar will not be shown at all.

Yeh, I agree with AnYiEE. Feedback for the action is what this is. If the action is fast, so is the feedback. It shouldn't be no feedback at all if the action is fast (which might be hard to determine deterministically to)

musjj commented 2 months ago

In my local version, I added a 100ms delay before the progress bar is animated and it feels fantastic IMO. Progress bars being flashed constantly for every little action makes the experience feels slower not faster for me.

But it's fine if you don't want to change it, I was planning to vendor this library anyways since it's tiny and easily customizable.

michaellopez commented 2 months ago

In my local version, I added a 100ms delay before the progress bar is animated and it feels fantastic IMO. Progress bars being flashed constantly for every little action makes the experience feels slower not faster for me.

But it's fine if you don't want to change it, I was planning to vendor this library anyways since it's tiny and easily customizable.

You mean you only show the progress bar for actions slower than 100ms? If the transition settles faster than 100ms there is no progress bar shown at all?

musjj commented 2 months ago

Basically, yeah.

philwolstenholme commented 1 month ago

In my local version, I added a 100ms delay before the progress bar is animated and it feels fantastic IMO. Progress bars being flashed constantly for every little action makes the experience feels slower not faster for me.

Nice idea, reminds me of https://www.npmjs.com/package/spin-delay