Add LoadingTemplate delayed/failed updates

[dit7ya]

Description

Adds status updates in the LoadingTemplate components - as per the specification from the issue. The timers are of 15 seconds and 30 seconds for delaying and failing respectively.

Note: The timer starts once the main script (or this component)) is loaded.

Since there are just two issues in this project I have just left master as the base branch. If you think there should be a feature branch, please let me know.

Resolves #3229.

[arrenv]

While hard to test accurately, unless you have some ideas. It looks to be working nice, good stuff.

[ArmandoGraterol]

LGTM 👍 It was indeed difficult to test, I had to manually change the conditional to always show the loading state in order to actually see the different components

[chinins]

It's looking good, just have a question about svgs.

[chinins]

I am no expert about svgs but I know that we always try to keep viewbox to 0 0 30 30 (please, see other svg examples in the repo). Is there any reason we can't have viewbox with these values?

[ArmandoGraterol]

I think the 0 0 30 30 here is not needed as this isn't an icon, so therefore it doesn't follow the 30x30 size standard that we have for icons in the dApp

[chinins]

I thought we have it for all svgs, but the other naked mole doesn't have it indeed. Thank you for clarification.

[dit7ya]

@arrenv and @ArmandoGraterol, there is a Network Throttle setting in the browser dev tools which can be used to test these kind of things (You need to enable the throttle after letting the page load once and refresh though, otherwise the initial SPA will take forever to load). However, while developing I followed what Armando mentioned for quick iterations.

https://developer.chrome.com/docs/devtools/network/#throttle

@chinins I just copied the svg from Figma. The other naked-mole.svg in the same folder has 0 0 600 150 as viewbox and neither do I have much idea about the implications of this. What do you suggest as the values? I am going to prettify that file btw.

[chinins]

Nice work!

[chinins]

I thought we have it for all svgs, but the other naked mole doesn't have it indeed. Thank you for clarification.