[Feature] Skeleton loading component

[KatiePUX]

Is your feature request related to a problem? Please describe.
Due to additional call being made to APIs, performance discrepancies and connection differences, users might encounter load time issues whilst data is received.

Describe the solution you'd like
A loading visualisation/interaction displays to the users will indicate when background activities are taking place.
A skeleton loading view with gradient 'shimmer' animation

A clear and concise description of what you want to happen.
Each section of the form to 'lazy load' from top of the form to bottom, one section at a time.
Link to figma designs - here: https://www.figma.com/file/Iuo0p4VZL9rrD0zpSCERAY/Private-Beta-Design-Versions-0.2?type=design&node-id=85%3A25850&mode=design&t=36S8U804nG2SSrxP-1

Describe alternatives you've considered
Loading spinner or progress bar - research suggests this is not a good user experience in this instance.
See design spike here: https://miro.com/app/board/uXjVNeonWcY=/

Additional context
Accessibility - key notes to consider:
Since the skeleton is a visual element, ensure that image replacements are marked as decorative. (using aria-hidden="true") and hidden from screen readers.
The keyboard is not focusable via keyboard
Avoid using heading markup for skeleton 'bones' that replaces headings
Set aria-busy="true" until loading is complete,. Then set to aria-busy="false"
Avoid content that flashes more than 3 times per second