Why would the loading indicator stay active if the promise was settled?

Question

I was reading this article about Promise Basics on Javascript.info and came across an example about a usecase for the .finally() method.

It says:

The idea of finally is to set up a handler for performing cleanup/finalizing after the previous operations are complete.

E.g. stopping loading indicators, closing no longer needed connections, etc.

I'm not sure about the implementation of a loading indicator, but I assume this example doesn't jump to conclusions.

So assuming that I have some loading indicator that waits for some promise to settle, then it gets settled. Why would the loading indicator stay active if the promise was settled then?

It's just an abstract question.

Since Promisses don't `settle` I don't quite understand what you mean. If by `settle` you mean the promise have resolved then no, promises don't always settle, they may sometimes get rejected (throw errors). This is what `.finally()` is for. If by `settle` you mean that the promise either resolve or reject then `.finally()` is just where the promise settles. — slebetman, Nov 30 '22 at 07:33
Also, loading indicators are not a feature of javascript or the browser. "Loading indicator is active" is just a human interpretation. When you make a loading indicator active all you are telling your code to do is display some animated gif of a spinning circle. When the promise completes you need to write some code to manually hide that animated gif (deactivate the loading indicator) but if you do it in a `.then()` block there is a possibility that the loading indicator keep spinning because of an error since the `.then()` won't be executed. — slebetman, Nov 30 '22 at 07:36
@slebetman [What is the correct terminology for javascript promises](https://stackoverflow.com/q/29268569) - "settled" is "fulfilled", when a promise is *not* rejected and has reached a final state. — VLAZ, Nov 30 '22 at 07:36

score 1 · Answer 1 · answered Nov 30 '22 at 07:23

.finally() is just a way to run some code when the promise either resolves or rejects. So, in a loading indicator, you probably need to clear the loading indicator whenever the operation is complete, whether it succeeded or not. That makes it an appropriate candidate to use .finally().

Keep in mind that .finally() is just a programming convenience. You could put the same code in both a .then() and a .catch() and handle both outcomes that way too. Or, you could pass two handlers to .then(). But, by putting it in a .finally() handler, you only have to put it one place and it will run for either a resolve or reject outcome.

score 0 · Accepted Answer · answered Nov 30 '22 at 07:23

The hypothetical loading indicator it discusses is one controlled by the author's code.

const loading = document.createElement('img');
loading.src="loading.gif";
loading.alt="Loading!";

document.body.append(loading);
do_something().finally(() => loading.remove());

It wouldn't disappear without you writing code to make it disappear because JavaScript does only what you tell it to do.

score 0 · Answer 3 · answered Nov 30 '22 at 07:28

Consider a form submission scenario, We set the isLoading to true, showing the loading indicator on submission. On Successful submission, then() -> We need to stop the loading indicator. On Failure/Errors after submission, catch() -> We need to stop the loading indicator, to allow the user to re-edit the form and submit again. So, we place it in finally() to set isLoading to false for both scenarios. As the code placed in finally will run regardless of resolve/reject.

Why would the loading indicator stay active if the promise was settled?

3 Answers3