setup loading component processes

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

web-app/src/Routes.tsx

@@ -25,13 +25,13 @@ const Routes = () => {
       <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} />
@@ -41,7 +41,7 @@ const Routes = () => {
         </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} />

web-app/src/components/Loading/index.tsx

@@ -2,11 +2,11 @@ import { Loading } from '@alifd/next'
 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

web-app/src/containers/Loading/LoadingPage.tsx

@@ -22,7 +22,7 @@ const styles = {
 const LoadingPage = ({ text }: Props) => {
   return (
     <div css={styles.page}>
-      <Loading text={text} />
+      <Loading message={text} />
     </div>
   )
 }

web-app/src/containers/Loading/index.tsx

@@ -2,11 +2,10 @@ import * as React from 'react'
 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 = {
@@ -20,7 +19,7 @@ const styles = {
   },
 }
 
-const LoadingPage = ({ text }: Props) => {
+const LoadingPage = ({ text, processes }: Props) => {
   const [showLoading, setShowHiding] = React.useState(false)
 
   React.useEffect(() => {
@@ -38,9 +37,11 @@ const LoadingPage = ({ text }: Props) => {
     return null
   }
 
+  const message: string = processes && processes.length ? processes[0].title : text
+
   return (
     <div css={styles.page}>
-      <Loading text={text} />
+      <Loading message={message} />
     </div>
   )
 }

web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import useFetch from '../../services/hooks/useFetch'
 import * as TT from 'typings/tutorial'
-import Loading from '../Loading'
+import LoadingPage from '../Loading'
 
 interface Props {
   url: string
@@ -11,7 +11,7 @@ interface Props {
 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}`)