<Router>

{/* Setup */}

<Route path={['Setup.Startup', 'Setup.ValidateSetup']}>

<LoadingPage text="Launching..." />

<LoadingPage text="Launching..."processes={context.processes}/>

</Route>

<Route path="Setup.Start">

<StartPage send={send} context={context} />

</Route>

<Route path={['Setup.LoadTutorialSummary', 'Setup.LoadTutorialData', 'Setup.SetupNewTutorial']}>

<LoadingPage text="Loading Tutorial..."/>

<LoadingPage text="Loading Tutorial..."processes={context.processes} />]

</Route>

<Route path="Setup.SelectTutorial">

<SelectTutorialPage send={send} context={context} />

</Route>

{/* Tutorial */}

<Route path={['Tutorial.LoadNext', 'Tutorial.Level.Load']}>

<LoadingPage text="Loading Level..." />

<LoadingPage text="Loading Level..."processes={context.processes}/>

</Route>

<Route path="Tutorial.Level">

<LevelSummaryPage send={send} context={context} />

import * as React from 'react'

interface Props {

text: string

message: string

}

const LoadingComponent = ({text }: Props) => {

return <Loading tip={text} />

const LoadingComponent = ({message }: Props) => {

return <Loading tip={message} />

}

export default LoadingComponent

const LoadingPage = ({ text }: Props) => {

return (

<div css={styles.page}>

<Loadingtext={text} />

<Loadingmessage={text} />

</div>

)

}

import * as T from 'typings'

import { css, jsx } from '@emotion/core'

import Loading from '../../components/Loading'

import Message from '../../components/Message'

interface Props {

text: string

context?: T.MachineContext

processes?: T.ProcessEvent[]

}

const styles = {

},

}

const LoadingPage = ({ text }: Props) => {

const LoadingPage = ({ text, processes }: Props) => {

const [showLoading, setShowHiding] = React.useState(false)

React.useEffect(() => {

return null

}

const message: string = processes && processes.length ? processes[0].title : text

return (

<div css={styles.page}>

<Loadingtext={text} />

<Loadingmessage={message} />

</div>

)

}

import * as React from 'react'

import useFetch from '../../services/hooks/useFetch'

import * as TT from 'typings/tutorial'

importLoading from '../Loading'

importLoadingPage from '../Loading'

interface Props {

url: string

const LoadTutorialSummary = (props: Props) => {

const { data, error, loading } = useFetch<TT.Tutorial>(props.url)

if (loading) {

return <Loading text="Loading tutorial summary..." />

return <LoadingPage text="Loading tutorial summary..." />

}

if (error) {

console.log(`Failed to load tutorial summary: ${error}`)