Doc Viewer shows "unable to fetch documents" error during initial load

[chriswilty]

Bug report

Description

On opening the Document Viewer in sandbox, the available document list is fetched from the server. But while we wait for that to load, we see error message "Unable to fetch documents..." until the request completes. This is obviously misleading. Instead we should probably see a loading indicator, and an error message only if the request failed or returned with an empty document list.

The problem is exacerbated because the component is unmounted on close, meaning a request is made every time the viewer is opened. We might therefore consider lifting the "available documents" state into a parent component, and passing it in as a prop. Currently the App component is the parent of the viewer, so the state would need to live there, and probably be fetched when Sandbox is first opened.

Alternatively, we could send the available documents list in the level data response. Level data are fetched from MainComponent rather than App, so the function to open the document viewer would need to be moved into there. This would be the more efficient solution.

Update
The "alternative" solution above will be implemented for reasons of efficiency.

Reproduction steps

Steps to reproduce the behaviour:

1. Open the Sandbox level
2. Click on View Documents in the left side panel
3. Message is visible: "Unable to fetch documents ..."
4. After a short pause, the above message is replaced by the first document.

Expected behaviour

Error message does not display on initial fetch; instead, a loading indicator is displayed if the docs request is in progress.

Acceptance criteria

GIVEN I am on Sandbox level
WHEN I open the Document Viewer
THEN the first document loads immediately

[chriswilty]

Deployed to remote, and it now works as expected 👍