From f8180e2b9815ab224540462f47ba952abc9bf91a Mon Sep 17 00:00:00 2001
From: Felix Hamme <git@fj.hamme.net>
Date: Thu, 20 Jun 2019 16:11:07 +0200
Subject: [PATCH] Add content loading message to TournamentList (both public
 and private)

---
 js/components/TournamentList.js | 38 +++++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/js/components/TournamentList.js b/js/components/TournamentList.js
index 4a28da9..6886f17 100644
--- a/js/components/TournamentList.js
+++ b/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) {
-            return <p className="text-center border-light font-italic text-secondary border-top border-bottom p-1">keine
-                Turniere vorhanden</p>;
-        } else {
-            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}/>
-            ));
+        if (!this.state.loaded) {
+            return (<EmptyList>
+                <Spinner animation='border' role='status' size='sm'/>
+                <span className='ml-3'>lade Turnier-Liste</span>
+            </EmptyList>);
         }
+
+        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}>