Add content loading message to TournamentList (both public and private)

js/components/TournamentList.js

@@ -1,35 +1,51 @@
 import React from 'react';
 import {requestTournamentList} from '../api';
+import {Spinner} from 'react-bootstrap';
 
 export default class TournamentList extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            tournaments: []
+            tournaments: [],
+            loaded: false
         };
     }
 
     componentDidMount() {
         requestTournamentList(this.props.type, tournaments => {
             this.setState({
-                tournaments: tournaments
+                tournaments: tournaments,
+                loaded: true
             });
-        }, () => {});
+        }, () => {
+            this.setState({loaded: true});
+        });
     }
 
     render() {
-        if (this.state.tournaments.length === 0) {
+        if (!this.state.loaded) {
-            return <p className="text-center border-light font-italic text-secondary border-top border-bottom p-1">keine
+            return (<EmptyList>
-                Turniere vorhanden</p>;
+                <Spinner animation='border' role='status' size='sm'/>
-        } else {
+                <span className='ml-3'>lade Turnier-Liste</span>
-            return this.state.tournaments.map(item => (
+            </EmptyList>);
-                // The code should be item.code but the api just supports it this way by now
-                <TournamentListEntry name={item.name} code={item.id} key={item.id}/>
-            ));
         }
+
+        if (this.state.tournaments.length === 0) {
+            return <EmptyList>keine Turniere vorhanden</EmptyList>;
+        }
+        return this.state.tournaments.map(item => (
+            // The code should be item.code but the api just supports it this way by now
+            <TournamentListEntry name={item.name} code={item.id} key={item.id}/>
+        ));
     }
 }
 
+function EmptyList(props) {
+    return (<p className="text-center border-light font-italic text-secondary border-top border-bottom p-1">
+        {props.children}
+    </p>);
+}
+
 function TournamentListEntry(props) {
     return (
         <a className="w-100 d-inline-block mt-2 text-left btn btn-outline-primary" href={'/t/' + props.code}>