Show a loader until the camera loads and only then enter the camera screen

[nitzanballerine]

Subject

Bug - The camera loads while the user is on the camera screen

Description

After entering the camera screen (where you take a picture of a document or a selfie) there are a few moments until the camera loads and appear on the screen. In the meanwhile, the user sees a grey screen.
This causes two problems:

1. The experience looks buggy and increases anxiety.
2. If the user clicks the camera button before the camera loads the flow will proceed to the next step, without an image taken.

Has the bug been reported before

No.

Expected Behaviour

After giving permission to use the camera and right before entering any camera screen, hold the flow on the current screen the user is in and put a loader for until the camera loads and the flow can proceed.
Once the camera has loaded, enter the camera screen.

Actual Behaviour

The user enters the camera screen and sees a blank page where the camera content should be presented, with UI on top of it.
Only once the camera has been loaded it appears on the screen.

Environment

• All environments

Steps to Reproduce

1. Enter the flow
2. Choose a document to upload
3. Approve camera permissions
4. Enter the camera screen
5. See the blank background
6. Once the camera loads it will show up

Any possible solutions

Use the loader that exists in Ballerine's flow: sdks/web-sdk/src/lib/atoms/Loader/Loader.svelte
Change the text on the loader to be: "Initiating camera"

Definition of done

1. Enter the flow
2. Choose a document to upload
3. Approve camera permissions
4. See a loader
5. Enter the camera screen when the camera is already running

[TzlilSwimmer123]

Hi @nitzanballerine I am thinking about taking this issue, how the assignment works?

[alonp99]

Hey @TzlilSwimmer123, Thanks for your interest in contributing!
I'll assign this issue to you, it will be best if we talk about the details in our slack/discord community channels. we can give you all the necessary context and brainstorm about the implementation :)