Add loading indicator

[kashiashvili]

Add spinner and text when data is being fetched #10

I'm pretty sure this markup could have been done better

div.text-center(style="display: flex; justify-content: center; position: relative;")
          button#submit(type="submit") Authorize & Backup
          span#loading.loader(style="display: none; position: absolute; left: 65%;")

[kashiashvili]

I'm not sure notification about the pr have reached you so just in case @darekkay

[darekkay]

Thank you for the pull request. Unfortunately, it doesn't fully solve #10 . The spinner is only visible until the /export request returns. However, the export is only finished after /download request finishes.

While the current state is bad (no loading indicator at all), I would argue that the proposal makes it worse - now users may think that once the loading spinner moves away, the download is completed - which is not true.

I've created this project 10 years ago, mostly as a learning experience. And the code shows that, making some changes quite difficult. As far as I can tell, I used window.location.replace to redirect to the /download endpoint. As the endpoint returns a file, the browser downloads the file and the code relies on native browser handling. For some reason, we don't see a native browser tab loading.

What could work (just tried it as a proof of concept) would be to replace the window.location.replace with

    await fetch(persistentBackupUrl);

and then to manually download the result.

Unfortunately, I currently don't have the time to further look into this.

[kashiashvili]

@darekkay, I'm sorry for wasting your time. At the time of development, I was experiencing network issues which prevented me from downloading data from Todoist. This also made it difficult for me to detect the early disappearance of the spinner, as network errors consistently resulted in an error page.

Thanks for the suggestions. Now it's done and tested.