Update "transaction in progress" animation that appears once sender initiates transaction

[talmahaj]

Background: Given that we obfuscate a number of the things going on behind the scenes in the app, it's possible for a sender to finalize a transaction and have to wait a while to get feedback because Tor is still connecting and/or the base node is still syncing. The recipient node discovery process also takes up to 20 seconds at the moment, but we want to maintain that because the best transaction UX by far is when both users are online simultaneously (rather than async via store and forward, which is the plan B for when they're not).

Our current "sending tari..." screen was never intended to be shown for more than a few seconds when it was first designed, and it's ineffective for the situation above, because there is no sense of progress and many users think the app is frozen or hanging when it's not the case.

Solution: Make it fun to wait for your transaction to complete, and more importantly give users a sense of progress while they wait so they have peace of mind that the app is functioning as it should be. The animation also needs to be flexible enough to accommodate situations where a transaction can take 30 seconds, one where it can take 5 minutes.

Design specs: https://app.zeplin.io/project/5dbdf1a40bdfd3832e35c9c5/dashboard?seid=5e97b52caa10e47bec343494

Animation specs: https://www.dropbox.com/s/qrqyuoy3kr9w13d/sending.mp4?dl=0
(NOTE: this video is just to show the timing of how the three thick purple segments in the design above should animate in and out for each step -- the rest of the design, including the green checkmarks that appear above each purple segment, is outdated per the design specs in Zeplin above)

Acceptance Criteria:

• At a minimum, even if everything is already connected, each of the three purple segments should animate in and out once before animating in again and moving onto the next step (so purple fills the segment, then goes away, then fills in again, then the purple in the following segment starts to come in as the copy changes). If this feels too slow we can speed up the animation a bit.
• The animation stays on the first segment until Tor completes connecting and base node completes syncing, if need be. Much of the time they will already be completed because the process starts once the app is opened, but in Turkey for example, @kutsal has to use a VPN for Tor so it takes 4-5 minutes to connect.
• The animation stays on the second section until the discovery process succeeds or times out
• The animation on the third section should always appear for the same amount of time regardless of whether discovery succeeds or not, since it's not dependent on anything and is there just to give user feedback.

[kukabi]

I'm assuming the progress step no.1 is for the connection status (internet, tor and base node), and only after this step is complete can we make the actual request to send - is there a timeout period here?

[talmahaj]

The copy on the screens is slightly different than what's in Zeplin, e.g. the N in network should be lowercase.
https://zpl.io/V4BqoP0

[Tas4tari]

@talmahaj Closing of this ticket as the related component tickets have been tested and closed