Replace credential offer 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 credential offer has a goal code
AND establishes a connection
When the holder scans the QR code
Then they are taken to the credential offer 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 credential offer 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 credential offer flow and turn return them to the scan screen

Wireframes or relevant image assets / links

Figma file

Logic flow diagrams

Credential offer flow

Generic (no goal code)