Loading component

[martinbagshaw]

@susanX I will push a commit shortly, and explain a few amends here:

proposed usage may be something like this:

// this could be the trial list page index file, for example...
import Loading from './Loading';
import { Header, Title } from './styles';

const TrialDetail = ({ ...props }) => {

/* when results come back from an API call, setIsLoading(false) would be called,
changing isLoading in the state of this component to false. This would remove
the loading component entirely, and the results will display instead */

/* alternatively, if we can find a way to get the progress of results loading,
we could pass in a number or string to indicate loading progress to the component.
This would display a different message (like your title1 or title2), or state of a
progress indicator. I will leave some notes in the Loading component to
show you how to do this. */

    const [isLoading, setIsLoading] = useState(true);

    return (
    <>
        <Header>
            {isLoading && <Loading />}
            // show the page title if not loading
            {!isLoading && <Title>Page Title Here!</Title>}
        </Header>
    </>
    );

};

amends

• moved loading component into a separate folder, in order to not be confused with styled component setup files (Typography, Layout, etc). This component displays information, so should be separate.
• removed isLoading prop from the component. The parent component is the place where we would decide whether to load the loading component or not. Sorry for any misleading advice I gave previously, I guesss I did not think it through that much!

[wright1]

I have removed the path to the loading component. I commented out the about page and rendered the loading button there with and without the processing prop. I didn't leave the component there but if you want to see it working you could try that.