Update proof request loading screens with skeleton loading | Dev

[knguyenBC]

Description of feature / user story

As a developer, I want to be able to see where in the process of a credential offer or proof request is, especially when the holder has taken a screenshot, so that I can know where the holder is having issues

As a holder, I want to be able to know if they are experiencing an issue, so that they can immediately try to troubleshoot for themselves.

Acceptance Criteria

GIVEN the proof request has a goal code
AND establishes a connection
When the holder scans the QR code
Then they are taken to the proof request skeleton loading screen
And the loading screens display a loading bar that depicts status of the connection and when the proof is loading

Given a proof request is in process
When 10 seconds has passed
Then an alert box is displayed letting people know it's slower than usual
And tapping on try again will cancel the proof request flow and turn return them to the scan screen

Wireframes or relevant image assets / links

Figma file

Logic flow diagrams

Proof request flow

Generic (no goal code)

Dev Notes:

• Refactor screen to accommodate multiple states
• Refactor/Split to multiple components