Merge pull request #288 from coderoad/feature/loading-screen-processes

Feature/loading screen processes

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/components/ProcessMessages/index.tsx

@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/core'
 import TestMessage from './TestMessage'
 
 interface Props {
-  testStatus: T.TestStatus | null
+  testStatus?: T.TestStatus | null
   processes: T.ProcessEvent[]
 }
 

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,32 +2,40 @@ 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'
+import ProcessMessages from 'components/ProcessMessages'
 
 interface Props {
   text: string
-  context?: T.MachineContext
+  processes?: T.ProcessEvent[]
 }
 
 const styles = {
   page: {
     position: 'relative' as 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+    alignItems: 'center' as 'center',
+    justifyContent: 'center' as 'center',
     height: '100%',
     width: '100%',
   },
+  processes: {
+    padding: '0 1rem',
+    position: 'fixed' as 'fixed',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
 }
 
-const LoadingPage = ({ text }: Props) => {
-  const [showLoading, setShowHiding] = React.useState(false)
+const LoadingPage = ({ text, processes }: Props) => {
+  const [showLoading, setShowHiding] = React.useState<boolean>(!!processes?.length)
 
   React.useEffect(() => {
     // wait some time before showing loading indicator
     const timeout = setTimeout(() => {
       setShowHiding(true)
-    }, 600)
+    }, 500)
     return () => {
       clearTimeout(timeout)
     }
@@ -37,10 +45,14 @@ const LoadingPage = ({ text }: Props) => {
   if (!showLoading) {
     return null
   }
-
   return (
     <div css={styles.page}>
-      <Loading text={text} />
+      <Loading message={text} />
+      {processes && processes.length ? (
+        <div css={styles.processes}>
+          <ProcessMessages processes={processes} />
+        </div>
+      ) : null}
     </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}`)

web-app/src/services/state/machine.ts

@@ -29,6 +29,22 @@ export const createMachine = (options: any) => {
         processes: [],
         testStatus: null,
       },
+      on: {
+        // track commands
+        COMMAND_START: {
+          actions: ['commandStart'],
+        },
+        COMMAND_SUCCESS: {
+          actions: ['commandSuccess'],
+        },
+        COMMAND_FAIL: {
+          actions: ['commandFail'],
+        },
+        ERROR: {
+          // TODO: missing clearError
+          actions: ['setError'],
+        },
+      },
       states: {
         Setup: {
           initial: 'Startup',
@@ -121,22 +137,6 @@ export const createMachine = (options: any) => {
         Tutorial: {
           id: 'tutorial',
           initial: 'Level',
-          on: {
-            // track commands
-            COMMAND_START: {
-              actions: ['commandStart'],
-            },
-            COMMAND_SUCCESS: {
-              actions: ['commandSuccess'],
-            },
-            COMMAND_FAIL: {
-              actions: ['commandFail'],
-            },
-            ERROR: {
-              // TODO: missing clearError
-              actions: ['setError'],
-            },
-          },
           states: {
             LoadNext: {
               id: 'tutorial-load-next',

web-app/stories/Loading.stories.tsx

@@ -1,8 +1,19 @@
 import { storiesOf } from '@storybook/react'
+import * as T from '../../typings'
 import React from 'react'
 import LoadingPage from '../src/containers/Loading'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 storiesOf('Components', module)
   .addDecorator(SideBarDecorator)
-  .add('Loading', () => <LoadingPage text="Content" context={{}} />)
+  .add('Loading', () => <LoadingPage text="Content" />)
+  .add('Loading processes', () => {
+    const processes: T.ProcessEvent[] = [
+      {
+        title: 'title',
+        description: 'description...',
+        status: 'RUNNING',
+      },
+    ]
+    return <LoadingPage text="Content" processes={processes} />
+  })