Loading component

webapp/src/App.js

@@ -3,7 +3,7 @@ import React, { useReducer } from 'react'
 import { BrowserRouter, Routes, Route } from "react-router-dom"
 
 import Header from "./container/Header"
-import Leaderboard from "./components/Leaderboard"
+import Leaderboard from "./container/Leaderboard"
 import Game from "./components/Game"
 import About from "./components/About"
 

webapp/src/components/Loading.jsx

@@ -0,0 +1,5 @@
+import React from "react"
+
+export default function Loading() {
+    return <div className="Loading">Loading...</div>
+}

webapp/src/container/Leaderboard.jsx

@@ -1,10 +1,11 @@
+import './Leaderboard.css';
 import React from "react"
-import './index.css';
+import Loading from '../components/Loading';
 
 export default function Leaderboard({ leaderboard }) {
 
   if (leaderboard == null)
-    return <p>Loading...</p>
+    return <Loading />
 
   //  var listItems = Object.keys(data).map(playerName => {
   //    var rank = data[playerName];