[Frontend] Create data loading component

[bglossner]

This is a utility component. Its point is for another component that needs to fetch data to use it to display (for now) a spinner or progress circle while data is being loaded in and supply the data once it has been loaded in to the component. This can be a HOC (higher order component) or it can use composition principles. I think for now composition may be easier and might be more modular, if more work. A given component would use it like this:

const MyComponent = () => {
   // some stuff...
   return (
       // some stuff
       <DataLoader loadingComponent={...} query={...} onceLoadedComponent={...} errorComponent={...} />
       // some stuff
   );
};

NOTE: Cool component react provides called Suspense to make this easier: https://reactjs.org/docs/concurrent-mode-suspense.html

The component should take props that make it modular like you see above. The loadingComponent should be a React element of some sort ( like MyLoadedDataComponent). A number of the props should be optional (like errorComponent) with a default if it's not specified.

The overall behavior should be:

• Call the query (this will probably be an HTTP request)
• While loading, display that it's loading in some way (either through prop or default)
• Once loaded, it passes in the data as a prop to the component that should be shown once loaded.

Once again, how you do this is sorta up to you. Feel free to talk to the team about plans and decisions.

In terms of a query, this can be an abstract concept. It could be an HTTP request or a GraphQL query (it shouldn't matter). Your component should just require some function to exist to make the given "query" (this will be an async function).

• Create component of some type
• Implement proper behavior
• Probably make some interface called Query that has to have certain functional behavior. The needed behavior is up to you, as the component will need to use some function it specifies to make the query.
• Write unit tests