Javascript and Google sheets interactions

Question

I'm new in JavaScript and currently building a web apps that interact with Google Sheets as a database. Basically what i'm building right now is to get input from users through Web apps and giving it to the Google Sheets (which have all the database & formulas in it).

Based on the input, Google sheets will then do the calculation and return back the value to JavaScript to be publish on the Web. (I do this because i want to make the Google Sheets data remain private). Due to the complex dataset, Google Sheet will take some time (around 3-5 seconds) before can pass the value to Javascripts (using SuccessHandler).

The code that i currently have is working ok. But i want to make the Web apps more interactive. What i means is that, during the data processing by the Google Sheets, i want to tell the user to 'hold on' and don't do anything yet. I try to use loader but I don't know how to trigger & to stop the loader (while waiting Google Sheets do the calculation process).

Would greatly appreciate if someone could help me in this problem.

thanks.

Answer 1

Most of the time retrieving data from somewhere else using JavaScript is an asynchronous process. As a result you're not blocking the user from performing actions to keep your site interactive.

The thing you're trying to achieve is keeping track of when your asynchronous data has been collected. This can be achieved with Promises and techniques like async ... await. Another option, though not recommended, is making your code synchronous, meaning the whole page get blocked while your retrieving data from Google Sheets. The pro is that a user can't do anything, the con is that if it takes too long it might look like the page stopped working (as it will literally freeze).

Explaining asynchronous JavaScript is a too in-depth topic to elaborate on here, but there are a lot of tutorials out there to get the hang of this. I'd suggest you dive into that.