Reduce redundant querying/loading and reuse loaded resource on Capture Details and its sub-pages

Concept

Actions like loading a full resolution image from base64 data URI is costly. Querying from repository could hurt performance as well. There's much room for improvement to reduce the time for a page to be fully loaded.

Reason/Hypothesis

The capture-details page and some of its subpages uses the exactly same resource, such as the full resolution image, the Proof object, the DiaBackendAsset object fetched from backend, etc.

Currently, every resource that takes non-trivial time loading is not shared between these pages, and would cause very obvious performance impact. It also forces a lot of repeated code for building the observables and doing type guarding.

To see the case, go to the capture-details page and wait for the image to load. Now click on send button to go to the sending-post-capture page. Even though the image shown is exactly the same, it still need a completely reload.

Suggested Implementation (if any)

1. Base64 data URI is too long to be passed in router parameter. Might try file system path or webpath.
2. Some page might not need to actually be separated pages. If some pages uses similar resources, they could be merged into a single page with multiple page state.

┆Issue is synchronized with this Asana task by Unito

Start by tracing resource loading across the capture-details and sending-post-capture pages, focusing on the full-resolution image, Proof object, and DiaBackendAsset object. Compare how these resources are loaded when navigating between the pages; done means shared resources no longer trigger redundant loading or querying and the image does not reload unnecessarily.