Add spinner

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/Table.js

@@ -17,6 +17,8 @@ import Resource from './Resource.js';
 import ViewCard from './ViewCard.js';
 import Winner from './Winner.js';
 import ChooseCard from './ChooseCard.js';
+import { CircularProgress } from "@material-ui/core";
+import 'moment-timezone';
 
 /* Start of withRouter polyfill */
 // https://reactrouter.com/docs/en/v6/faq#what-happened-to-withrouter-i-need-it
@@ -218,7 +220,7 @@ const Chat = ({ table }) => {
   }
 
   const name = table.game ? table.game.name : "Why no game?";
-  const startTime = table.game ? table.game.startTime : Date.now();
+  const elapsed = table.game ? (table.game.timestamp - table.game.startTime) : undefined;
   return (
     <Paper className="Chat">
       <List className="ChatList" id="ChatList" onScroll={chatScroll}>
@@ -228,7 +230,7 @@ const Chat = ({ table }) => {
         disabled={!name}
         onChange={chatInput}
         onKeyPress={chatKeyPress}
-        label={(<Moment format="h:mm:ss">{Date.now()-startTime}</Moment>)} variant="outlined"/>
+        label={elapsed && <Moment tz={"Etc/GMT"} format="h:mm:ss" durationFromNow interval={1000} date={table.game.startTime}></Moment>} variant="outlined"/>
     </Paper>
   );
 }
@@ -523,7 +525,8 @@ class Table extends React.Component {
       error: "",
       signature: "",
       buildActive: false,
-      cardActive: undefined
+      cardActive: undefined,
+      loading: 0
     };
     this.componentDidMount = this.componentDidMount.bind(this);
     this.updateDimensions = this.updateDimensions.bind(this);
@@ -585,6 +588,8 @@ class Table extends React.Component {
       value = '';
     }
 
+    this.setState({ loading: this.state.loading + 1 });
+
     return window.fetch(`${base}/api/v1/games/${this.state.game.id}/${action}/${value}`, {
       method: "PUT",
       cache: 'no-cache',
@@ -607,6 +612,7 @@ class Table extends React.Component {
       console.error(error);
       this.setState({error: error.message});
     }).then(() => {
+      this.setState({ loading: this.state.loading - 1 });
       this.resetGameLoad();
     });
   }
@@ -685,6 +691,7 @@ class Table extends React.Component {
       return;
     }
 
+    this.setState({ loading: this.state.loading + 1 });
     return window.fetch(`${base}/api/v1/games/${this.state.game.id}`, {
       method: "GET",
       cache: 'no-cache',
@@ -707,6 +714,7 @@ class Table extends React.Component {
       console.error(error);
       this.setState({error: error.message});
     }).then(() => {
+      this.setState({ loading: this.state.loading - 1 });
       this.resetGameLoad();
     });
   }
@@ -725,6 +733,7 @@ class Table extends React.Component {
       this.loadTimer = null;
     }
 
+    this.setState({ loading: this.state.loading + 1 });
     return window.fetch(`${base}/api/v1/games/${this.state.game.id}/state/${state}`, {
       method: "PUT",
       cache: 'no-cache',
@@ -746,6 +755,7 @@ class Table extends React.Component {
       console.error(error);
       this.setState({error: error.message});
     }).then(() => {
+      this.setState({ loading: this.state.loading + 1 });
       this.resetGameLoad();
       return this.game.state;
     });
@@ -952,6 +962,7 @@ class Table extends React.Component {
       params.method = "POST";
     }
 
+    this.setState({ loading: this.state.loading + 1 });
     window.fetch(params.url, {
       method: params.method,
       cache: 'no-cache',
@@ -1000,6 +1011,7 @@ class Table extends React.Component {
       console.error(error);
       this.setState({error: error.message});
     }).then(() => {
+      this.setState({ loading: this.state.loading - 1 });
       this.resetGameLoad();
     });
 
@@ -1060,6 +1072,9 @@ class Table extends React.Component {
 
     return (
       <div className="Table">
+        { this.state.loading > 0 &&
+          <CircularProgress className='Loading'/>
+        } 
         
         <div style={{display: "inline-flex", flex: 1, flexDirection: "column"}}>
           <Board table={this} game={game}/>