[UI] Identify loading status on the save button

[yfdyh000]

The current progress on the top of the screen, and when loading has been completed there will be no identifier.

A style of the save button in the lower right corner, will help the user to stay view. A color or borders, and even a reminder to confirm (like #288).

[eight04]

Do you mean the batch download?

If there is no loading error, the progress bar will fade out when completed:

image-picka/src/static/css/progress.css

Lines 22 to 25 in d4807ae

	.progress-bar.finished:not(.error) {
	opacity: 0;
	transition: opacity 1s linear;
	}

If failed to load some image, the progress bar will be red and remain. Maybe we can make it fade into opacity: 0.2?

.progress-bar.finished {
  opacity: 0;
  transition: opacity 1s linear;
}
.progress-bar.finished.error {
  opacity: 0.2;
}

[yfdyh000]

Suppose that the loading takes 5 seconds, the user has to pay attention to the top and go back to the Save button after seeing the progress bar disappear. False start will lead to a failure of incomplete saves. So, a state change in the save button will save effort.
Incidentally, might it be better if the progress bar provides tooltips for the numbers? Although usually it doesn't last long, but when a failure occurs, the numbers might help?

[eight04]

So, a state change in the save button will save effort.

Can you elaborate? What is the difference between progress bar and numbers on the save button? What makes the button better?

False start will lead to a failure of incomplete saves

How about adding a confirmation to the save button when some images are still loading?

might it be better if the progress bar provides tooltips for the numbers?

👍 We can add a tooltip like ${percentage} (${loaded} / ${total}), failed: ${failure}

[yfdyh000]

So, a state change in the save button will save effort.

Can you elaborate? What is the difference between progress bar and numbers on the save button? What makes the button better?

A color/border instead of a number comparison? plus #284.

False start will lead to a failure of incomplete saves

How about adding a confirmation to the save button when some images are still loading?

if(loading) {confirm("")}

might it be better if the progress bar provides tooltips for the numbers?

👍 We can add a tooltip like ${percentage} (${loaded} / ${total}), failed: ${failure}

Good.