Analysis Loading Page

The analysis loading page is going to be the page displayed while an analysis is being generated by the backend. It will be the component polling the /analysis-status endpoint and updating the user on the status of the analysis generation.

I want to poll the endpoint every 3 seconds. This is done by utilizing setInterval. However if the app encounters an error or the progress returned by the API is 10 (meaning the analysis is completed) I want it to stop sending requests. Meaning I’ll have to clear the Timeout object created by setInterval() to stop the interval execution of checkStatus. To do that I’ll have to store a reference to said object so I can clear it later. The issue here is that if I store this in a standard variable inside the component it will not persist over re-renders since components are nothing else than functions that get re-run with every render, therefore re-initializing all variables contained in said functions. Therefore I used React’s useRef hook to create a persisting reference to the Timeout.

Then I just implemented the same loader as before with an added progress bar underneath it. Said progress bar adjusts it’s fill percentage depending on the current progress divided by 10 and multiplied by 100 (10 because there are 10 progress steps). This is followed by a status message which is just the status from the response.

Lastly I added a simple error display and “Go Back” button in case of there being an error message returned by the response.