Add loading indicator for camera preview while trying to scan QR codes

[drptbl]

Wallet version or commit SHA:
design-v2 branch (9e2d017)

Environment:
MacBook Pro (13-inch, 2017), macOS Mojave 10.14

Reproduction steps:

1. Login to your wallet
2. Click on "Send" button in the left menu
3. Click on "Enter QR Code" button
4. Click on "Capture" button

Description:
I'm experiencing a 5secs+ delay before preview show up, seeing a gray empty space for that time. Loading indicator would indicate that we're waiting for something.

Screenshots/Video:
https://i.imgur.com/88Kx0fw.gifv

[ranbena]

I'll handle this as part of work on #1582

[drptbl]

@ranbena @comountainclimber

Video:
https://i.imgur.com/0kcQWyU.gifv

On the video, you can see that wallet hangs for some time after first iteration of animation (wallet process hangs and is not responding for some time, 3-5 seconds). Doesn't matter how many times I try - it's always like this. I didn't see it before but also animation wasn't present before. Could it be that it's causing this delay now? Should I create a separate issue for this?

[ranbena]

I believe the hang time is individual and relies on hardware (lightly discussed here). I also think it was most likely there before (can check with the current 2.0 version).

Since this is expected I would opt for a separate issue. I'll dig more and see if I can find a workaround.

[ranbena]

I dug some more, tried a different qr scanner, profiled the performance of simpler implementations - doesn't look the hang is fixable.

How about we show a non-animating "Loading WebCam" text instead?

[comountainclimber]

Isn't the hanging spinner due to the time set here

neon-wallet/app/containers/App/Loading.js

Line 9 in ff340cc

export const ANIMATION_DURATION = 900 // one animation round in ms

?

[ranbena]

Isn't the hanging spinner due to the time set here

neon-wallet/app/containers/App/Loading.js

Line 9 in ff340cc

export const ANIMATION_DURATION = 900 // one animation round in ms
?

That's just a delay I put so at least the first cycle of the loading animation runs before it freezes :/ Detailed explanation here

[ranbena]

@drptbl I've worked on my own implementation of the qr scanner to address this.
The freeze is still noticeable BUT webcam load time has decreased by 85% on my comp! I'm eager to see if how it performs on yours.

The version can be updated from my fork ranbena/fix/qr-hang. (lmk if you need assistance with this)

This is a WIP

Known issues - preview fps might be low, preview dimensions might be off
I also added some bells and whistles but that's irrelevant.

[drptbl]

@ranbena
Re-tested, I didn't see much difference in terms of speed. It's still loading very slowly for me. First time takes like around 20 seconds, then from second time onwards, it takes around 7 seconds (after opening camera preview at least once before).

Previews:
https://i.imgur.com/zoNXgRK.gifv
https://i.imgur.com/7R69f48.gifv

In addition to that, there is an error thrown in console while trying to login with private key (however it doesn't affect functionality):

[ranbena]

@drptbl thanks for giving this a try.
Actually, it seems you might be experiencing a different issue than the one you originally reported.

"Scan QR" hang

The login issue that you now presented is baffling yet interesting. It's important to make a distinction - when clicking the "Scan QR" button, two consecutive steps occur 1) scannerActive state is toggled, swapping the rendered components (from login buttons to scanner), then 2) QRCodeScanner mounts, starts video and eventually starts scanning.

So it looks like step 1 hangs immensely, while step 2 (which is what this fix actually handles) is much shorter, especially on the 2nd attempt.

So in order to understand this I need to know:

1. If the Send modal (which was originally reported on) shows the expected perf improvement. This is most important.
2. How does this specific scenario compare to the current 2.0.0 version.
3. How come the preview showed no video stream? Did you physically block the webcam?

I might insert some console logs and ask you to rerun. Perhaps it'll give some insight.

THANKS @drptbl!!! We'll get through this!!

Error message

This message is a result of the #1732 polling feature, but it's not an actual error and has no such significance. The error throwing method is a hacky (but elegant) way of exiting a function to later be caught..
I'll suppress it in a separate commit and make it into a debug log instead 🤟🏻

[comountainclimber]

Closing this issue for now as the original issue is resolved in 2.1.0