From 101a8ad3b103c9a08cded6eefb36f58b0e73b11c Mon Sep 17 00:00:00 2001
From: Wenszel <wiktor.smaga13@gmail.com>
Date: Tue, 31 May 2022 18:01:56 +0200
Subject: [PATCH] added react loading

---
 package-lock.json            |  5 +++++
 package.json                 |  1 +
 src/components/Gameboard.jsx | 13 ++++++++++---
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1f760f1..dbec186 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12780,6 +12780,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
       "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
     },
+    "react-loading": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/react-loading/-/react-loading-2.0.3.tgz",
+      "integrity": "sha512-Vdqy79zq+bpeWJqC+xjltUjuGApyoItPgL0vgVfcJHhqwU7bAMKzysfGW/ADu6i0z0JiOCRJjo+IkFNkRNbA3A=="
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
diff --git a/package.json b/package.json
index 77bbab3..17bd903 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "react": "^17.0.1",
     "react-beforeunload": "^2.4.0",
     "react-dom": "^17.0.1",
+    "react-loading": "^2.0.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "socket.io": "^4.5.1",
diff --git a/src/components/Gameboard.jsx b/src/components/Gameboard.jsx
index 9c563a9..0a25e90 100644
--- a/src/components/Gameboard.jsx
+++ b/src/components/Gameboard.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useContext, useCallback } from 'react';
+import ReactLoading from 'react-loading';
 import { PlayerDataContext, SocketContext } from '../App';
 import Map from './game-board-components/Map';
 import Dice from './game-board-components/Dice';
@@ -65,9 +66,15 @@ const Gameboard = () => {
 
     return (
         <>
-            <Navbar players={players} started={started} time={time} isReady={isReady} />
-            {nowMoving ? <Dice nowMoving={nowMoving} rolledNumberCallback={rolledNumberCallback} /> : null}
-            <Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber} />
+            {players ? (
+                <>
+                    <Navbar players={players} started={started} time={time} isReady={isReady} />
+                    {nowMoving ? <Dice nowMoving={nowMoving} rolledNumberCallback={rolledNumberCallback} /> : null}
+                    <Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber} />
+                </>
+            ) : (
+                <ReactLoading type='spinningBubbles' color='white' height={667} width={375} />
+            )}
         </>
     );
 };