An Interactive Loading Screen (which updates based on user input or time elapsed)

Question

I have a simple Angular app that allows users to do some heavy calculations on their end (must not be on the server). I am currently using a customized ngx-spinner to show a loading screen during the calculation. I would like to know (if possible) how to make the loading screen interactive, meaning: can respond to user input or can change the display (eg text or image) as time goes while the calculation is being carried out.

You can imagine it as a mini-game that a user can play while it is loading, a count-down timer, or even just a clock that shows the current time. Any of them would be great.

The flow would look like this:

(1) A user issues a calculation command

(2) Show the loading screen and then start the calculation

• user should be able to click on the loading screen for some effects, and/or see changes as time goes while waiting for the result

(3) calculation is done, display the result and hide the loading screen

So far I have tried to set up a timer (either using rxjs or setInterval) to periodically update it or bind the HTML element with an event handler but they only work when there's nothing running synchronously (if I simply show the loading screen without doing any calculation). I know it probably has something to do with the fact that the UI thread(?) is occupied by the calculation but I don't know any way to circumvent that (or to use any other thread). Is this a limitation of single-page applications or is it just not possible in general? (If yes, is there any way to fake it and make it look like what I described? And not just using a loading gif.)

First Edit: I have just found a similar and (easier?) question: Update webpage to show progress while javascript is running in in a loop but could be a bit limited. I still like to know if there is a general solution without needing to split up every long process to indicate progress but simply update the spinner according to a timer (or user interaction) regardless.

Disclaimer: I'm fairly new to Angular, as well as real-world apps. Apologies for any misuse of languages or any presence of dumb ideas.

Answer 1

If part of the problem is that the web page is 'frozen' or 'stalled' while waiting for the calculation to complete, it might be possible for you to have the calculation itself performed in a web worker: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

You can do something like:

1. Create a web worker file and put some logic in there which will perform the calculations.
2. Add events for "onCalculationReceived" and "onCalculationComplete". The web worker will listen for the first event, perform calcuations, and dispatch the second.
3. Where the calculation is invoked, dispatch the first event and wait for the second event.

With that, you should have no problems with letting the user interact with the UI while the expensive calculation is being performed.