ReactJS: add loading state

- use 8081 port for talking to SpringBoot (as 8080 occupied by Corda)

webapp/package.json

@@ -17,7 +17,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://localhost:8080",
+  "proxy": "http://localhost:8081",
   "eslintConfig": {
     "extends": [
       "react-app",

webapp/src/App.js

@@ -3,24 +3,25 @@ import React, { useState, useEffect } from 'react';
 
 function App() {
 
-  const [joke, setJoke] = useState([]);
+  const [joke, setJoke] = useState(null);
+
   useEffect(() => {
-     fetch('/api/badjokes')
+    fetch('/api/badjokes')
-        .then((response) => response.json())
+      .then((response) => response.json())
-        .then((data) => {
+      .then((data) => {
-           console.log(data.joke);
+        console.log(data.joke);
-           setJoke(data.joke);
+        setJoke(data.joke);
-        })
+      })
-        .catch((err) => {
+      .catch((err) => {
-           console.log(err.message);
+        console.log(err.message);
-        });
+      });
   }, []);
 
   return (
     <div className="App">
       <header className="App-header">
-        <p>         
+        <p>
-          Here is your joke: {joke}
+          Here is your joke: {joke ? <span>{joke}</span> : <span>Loading...</span>}
         </p>
       </header>
     </div>