Promise basics loading indicator example

[bogdanbacosca]

So I was wrapping my head around why would the loading indicator stay active if the promise was settled? The solution did not clarify everything for me, the best explanation I found is:

new Promise((resolve, reject) => {
  /* do something that takes time, and then call resolve or maybe reject */
  const loading = document.createElement('img');
  loading.src="https://media3.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif?cid=ecf05e471sfq2igav6mmdj3cvn1mr4j6br7k3tmo4jvg5t5u&rid=giphy.gif&ct=g";
  document.body.append(loading);
})
*!*
  // runs when the promise is settled, doesn't matter successfully or not
  doSomething().finally(() => loading.remove());
  // so the loading indicator is always stopped before we go on
*/!*
  .then(result => show result, err => show error)

Could something like this improve the example?

[iliakan]

There's no such "why" ;) The loading indicator will not stay active.

Give me a link to the tutorial if you find something unclear there.

[bogdanbacosca]

Promises basics

You could have some loading indicator implementation imported from a library that removes it behind the scenes? 😁

[iliakan]

You don't like the pseudocode?

new Promise((resolve, reject) => {
  /* do something that takes time, and then call resolve or maybe reject */
})
  // runs when the promise is settled, doesn't matter successfully or not
  .finally(() => stop loading indicator)
  // so the loading indicator is always stopped before we go on
  .then(result => show result, err => show error)

[bogdanbacosca]

Well it's fine but I had to look some stuff up to understand the part about the loading indicator, because there could be more ways of implementing it I suppose.

[iliakan]

So you'd want to improve it by a working example? will it really help?

[bogdanbacosca]

Not sure if it will prove anything... Also not sure how many other people wondered the same thing as they were reading but that was my main why after reading the article, maybe because I never saw a bug where the loading icon would`t go away, but I guess it could be possible and this could be just me.

As long if it's something relatable to anyone like the the subscription example witch was excellent, shouldn't be a problem. Maybe there is already some code somewhere in the tutorial that can be re-used in some way so to avoid doing unnecessary work, like the css animation example in the callback article?

If not, I guess the issue can be closed, I would't go as far to write something from scratch at this moment, but I could keep it in mind for the future.