Delay showing of the progress indicator

mike-odom commented 1 year ago

When I'm quickly moving through files, I'd prefer to not see the flicker of the progress indicator dots. In the case when the loading time is barely perceptible to my eye, the loading indicator is unnecessary and distracting.

https://github.com/ccseer/Seer/assets/5105729/fea427b2-4793-4a40-9333-555b1acf43d1

Something I've done in the past with web apps:

loadFile(imagePath, () => showFile());

setTimeout(() => if (fileNotLoaded) showLoadingIndicator(), 100);

It's nice to leave the previous preview image there, or at least start a fade on it. If not, there will be a flicker between the previous preview and then empty space, then the new preview.

ccseer commented 1 year ago

It's the same Object. Every file is previewed with a new Object. When loading a new file, the previous Object is deleted.

mike-odom commented 1 year ago

Ah I see, so it's instantly showing the new preview object each time it moves to another file and that immediately shows the loading indicator.

I made a little simulator to show some different settings that can be used even when using a new object. It's nice to delay the loading indicator just a little bit to prevent showing it unnecessarily.

By default the "Display Loading Indicator Delay" is set to 0 to simulate what Seer is doing currently.

Hit the "Next" button to see the "Loading..." flicker each time.
Increase that value until you see the "Loading..." infrequently or never.
Increase the "Simulate Loading Delay Max"

https://codesandbox.io/s/wispy-water-w39dzm?file=/src/Preview.js

ccseer / Seer

Delay showing of the progress indicator #408