Send: UI freezing when confirming tx

[pwltr]

Describe the bug When swiping to pay the UI freezes for a long time.

To Reproduce Steps to reproduce the behavior:

1. Go to 'Send'
2. Fill out Send form
3. Swipe to pay
4. Loading icon doesn't appear, button "Close" is not clickable on next screen for some time

Expected behavior Smooth animations on swiper, button clickable on Result screen

Screenshots

https://user-images.githubusercontent.com/8538369/189685914-a7c9b75f-b532-4a81-be39-c3e6e628ad3c.mp4

[pwltr]

Culprits are:

const t0 = performance.now();
const seed = await bip39.mnemonicToSeed(mnemonic, bip39Passphrase);
const t1 = performance.now();
console.log(`create seed took ${t1 - t0} ms!`);

create seed took 2945 ms!

(this runs twice, so 6 seconds of blocking UI here)

and this:

const t0 = performance.now();
const { inputs = [] } = transactionDataRes.value;
await Promise.all(
	inputs.map((input, i) => {
		try {
			const path = input.path;
			const keyPair = root.derivePath(path);
			psbt.signInput(i, keyPair);
		} catch (e) {
			return resolve(err(e));
		}
	}),
);
psbt.finalizeAllInputs();
const t1 = performance.now();
console.log(`finalizeAllInputs took ${t1 - t0} ms!`);

finalizeAllInputs took 566 ms!

[coreyphillips]

I'll assign myself this one since I have the nodejs-mobile branch in the works still. Having difficulty getting tests to cooperate. Don't think Github actions will like the changes either so it may take a bit more effort to get it through.

[pwltr]

Just note that the comment above might not be entirely accurate. Not 100% sure what the root cause for the UI blocking is. You can view it as a pointer though.

[aldertnl]

What we could do is start the spinner immediately after swiping, even before the technical sending process begins, so that the user is informed that this is a loading state.