Delay loading state to reduce bounce & Manually move user focus on 2nd article view

[dr3]

Is your feature request related to a problem? Please describe.
When we load a new article we should delay showing the loading state to reduce visual bounce. We need to set the delay to a value that allows for some network lag, but doesn't feel like the page isn't responding.

In doing this, there is a chance the loading screen is never seen. This causes issues when transferring from 1 article to another seamlessly, as react will try to convert the article, not reseting the user focus.

Describe the solution you'd like
Add a delay to showing the loading state.

Manually move the user focus when transitioning to a loading screen or new article.

• This should follow the guidelines in https://bbc.github.io/gel/foundations/routing/ which say exactly how to move user focus in cases like this, and what to :)
• A developer accessibility swarm should be carried out as part of this Issue

Testing notes
On slow network when clicking on an inline article page from an article page its expected that the page loads after some delay and if the data doesn't fetches then should see a error page.

Dev insight: This can be simulated using the chrome dev tools slow network connection.

Additional context
This isn't to make the loading screen itself, it can remain simple text. The loading view itself will be handled by #1248

• Initially labelled with "Refinement needed"

[jroebu14]

I guess this one would need an a11y swarm/review.

[greenc05]

Accessibility acceptance criteria:

Given I use a screen reader
When I navigate from any simorgh page to another simorgh page
Then focus should be taken to the same place in the document structure each time
And this must be on the heading level 1
And the content of this should be announced

Full accessibility acceptance criteria for routing:
Given I am viewing the simorgh application
When I navigate from any simorgh page to another simorgh page
Then the page title must change to reflect the page content

Given I am viewing the simorgh application
When I navigate from one simorgh page to another simorgh page
Then the navigation must reflect the current page

Given I use a screen reader
When I navigate from any simorgh page to another simorgh page
Then focus should be taken to the same place in the document structure each time
And this must be on the heading level 1
And the content of this should be announced

Given I use a screen reader
When I navigate from any simorgh page to another simorgh page
And I have to wait for the page content to load
Then focus should be taken to a loading indicator until all the content is ready to be revealed
And this should be announced, such as ‘Loading’ or ’Please wait’

Given I use a screen reader
When I navigate from any simorgh page to another simorgh page
And a loading indicator was announced
When loading is complete
Then focus should be taken to the h1

Given I am viewing the simorgh application
When I navigate from any simorgh page to another simorgh page
Then when I press the browser back button, the previous page should be rendered
And when I press the browser forward button, the page rendered before pressing the back button should be rendered

Given I use a screen reader
When I navigate to a simorgh page from a non simorgh page
Then the page title must be announced on page load
And the focus should not be taken to the h1