@@ -4,6 +4,7 @@ import * as T from '../../../../typings/graphql'
44
55import queryTutorials from './queryTutorials'
66import { send } from '../../utils/vscode'
7+ import LoadingPage from '../LoadingPage'
78import TutorialList from '../../components/TutorialList'
89
910interface Props {
@@ -18,18 +19,28 @@ export const NewPage = (props: Props) => (
1819</ div >
1920)
2021
22+ const Loading = ( ) => < LoadingPage text = "Loading tutorials" />
23+
2124const NewPageContainer = ( ) => {
2225const { data, loading, error} = useQuery ( queryTutorials )
23- console . log ( 'data' , data )
2426if ( loading ) {
25- return null
27+ return Loading
2628}
2729
2830if ( error ) {
29- return < div > { JSON . stringify ( error , null , 2 ) } </ div >
31+ return (
32+ < div >
33+ < h5 > { error . message } </ h5 >
34+ < p > { JSON . stringify ( error , null , 2 ) } </ p >
35+ </ div >
36+ )
3037}
3138
32- return < NewPage onNew = { ( ) => send ( 'TUTORIAL_START' ) } tutorialList = { data . tutorials } />
39+ return (
40+ < React . Suspense fallback = { Loading } >
41+ < NewPage onNew = { ( ) => send ( 'TUTORIAL_START' ) } tutorialList = { data . tutorials } />
42+ </ React . Suspense >
43+ )
3344}
3445
3546export default NewPageContainer