Create async widget

src/App.css

@@ -1,3 +1,8 @@
 body {
   background-color: #212121;
+}
+
+html, body, #root, .App {
+  width: 100%;
+  height: 100%;
 }

src/App.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import './App.css';
-import { Button, createMuiTheme, ThemeProvider } from '@material-ui/core';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core';
-import { ApplicationDialogsProvider, input, matAlert, matConfirm } from './ui/widgets/DialogsProvider';
+import { ApplicationDialogsProvider } from './ui/widgets/DialogsProvider';
 import { lightBlue, pink } from '@material-ui/core/colors';
+import { InitWidget } from './ui/widgets/InitWidget';
 
 function App() {
   const darkTheme = createMuiTheme({
@@ -19,17 +20,8 @@ function App() {
         {/* Holder of dialogs */}
         <ApplicationDialogsProvider></ApplicationDialogsProvider>
 
-        {/* TODO : holder of login state */}
+        {/* Initialization widget */}
-
+        <InitWidget></InitWidget>
-        <Button onClick={()=>matAlert("heloo!!")}>alert</Button>
-        <Button onClick={()=>matConfirm("heloo!!").then((r) => matAlert("response: " + r))}>confirm</Button>
-        <Button onClick={()=>input({
-          label: "Your best joke",
-          message: "Please share your best joke:", 
-          initialValue: "initial",
-          minLength: 2,
-          maxLength: 10,
-          }).then((r) => matAlert("you wrote: " + r))}>input</Button>
       </div>
     </ThemeProvider>
   );

src/ui/widgets/AsyncWidget.tsx

@@ -0,0 +1,81 @@
+/**
+ * Asynchronous loading widget
+ * 
+ * @author Pierre Hubert
+ */
+
+import { Button, Paper } from "@material-ui/core";
+import React, { ReactNode } from "react";
+import { CenterCircularProgress } from "./CenterCircularProgress";
+
+enum Status {
+    LOADING,
+    ERROR,
+    SUCCESS
+}
+
+export interface AsyncWidgetProperties {
+    load: () => Promise<void>,
+    errorMessage: string,
+    onBuild: () => ReactNode
+}
+
+interface AsyncWidgetState {
+    status: Status,
+}
+
+export class AsyncWidget extends React.Component<AsyncWidgetProperties, AsyncWidgetState> {
+
+    constructor(props: any) {
+        super(props);
+
+        this.state = {
+            status: Status.LOADING
+        }
+
+        this.reload = this.reload.bind(this);
+    }
+
+    async reload() {
+        try {
+            this.setState({status: Status.LOADING});
+
+            await this.props.load();
+
+            this.setState({status: Status.SUCCESS});
+        } catch(e) {
+            console.error(e);
+            this.setState({status: Status.ERROR});
+        }
+    }
+
+    componentDidMount() {
+        this.reload()
+    }
+
+    render() {
+
+        if (this.state.status == Status.ERROR)
+            return (<div style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "100%",
+            }}>
+               <Paper>
+                    <div style={{padding: "5px 10px"}}>
+                        {this.props.errorMessage}
+                        
+                        &nbsp;
+                        
+                        <Button onClick={this.reload}>Try again</Button>
+                    </div>
+               </Paper>
+            </div>);
+
+        if(this.state.status == Status.SUCCESS)
+            return this.props.onBuild();
+
+        return (<CenterCircularProgress></CenterCircularProgress>)
+    }
+}

src/ui/widgets/CenterCircularProgress.tsx

@@ -0,0 +1,12 @@
+import { CircularProgress } from "@material-ui/core";
+
+export function CenterCircularProgress() {
+   return <div style={{
+       display: "flex", 
+       justifyContent: "center", 
+       alignItems: "center", 
+       height: "100%"
+    }}>
+        <CircularProgress></CircularProgress>
+    </div>
+}

src/ui/widgets/InitWidget.tsx

@@ -0,0 +1,39 @@
+/**
+ * Initialization widget
+ * 
+ * @author Pierre Hubert
+ */
+
+import React from "react";
+import { AsyncWidget } from "./AsyncWidget";
+
+
+export class InitWidget extends React.Component {
+
+    constructor(props: any) {
+        super(props);
+
+        this.init = this.init.bind(this);
+        this.build = this.build.bind(this);
+    }
+
+    async init() {
+        await new Promise((res, rej) => {
+            setTimeout(() => {
+                rej(null);
+            }, 500)
+        })
+    }
+
+    render() {
+        return (<AsyncWidget
+            errorMessage = "Failed to initialize application!"
+            load = {this.init}
+            onBuild = {this.build}
+        ></AsyncWidget>);
+    }
+
+    build() {
+        return (<div>yes !!! done !!!</div>);
+    }
+}