From 53b1dc4e35a2c79219e6e6879ee98292ce540af4 Mon Sep 17 00:00:00 2001
From: Aurora Lahtela <24460436+AuroraLS3@users.noreply.github.com>
Date: Sat, 21 Oct 2023 11:13:37 +0300
Subject: [PATCH] Fix small issues with PingTable

---
 .../dashboard/src/components/cards/common/PingTableCard.js    | 4 +++-
 Plan/react/dashboard/src/components/table/PingTable.js        | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/Plan/react/dashboard/src/components/cards/common/PingTableCard.js b/Plan/react/dashboard/src/components/cards/common/PingTableCard.js
index d91485d63..8fe82e506 100644
--- a/Plan/react/dashboard/src/components/cards/common/PingTableCard.js
+++ b/Plan/react/dashboard/src/components/cards/common/PingTableCard.js
@@ -3,12 +3,14 @@ import {Card} from "react-bootstrap";
 import CardHeader from "../CardHeader";
 import {faWifi} from "@fortawesome/free-solid-svg-icons";
 import PingTable from "../../table/PingTable";
+import {ChartLoader} from "../../navigation/Loader";
 
 const PingTableCard = ({data}) => {
     return (
         <Card id={'ping-per-country'}>
             <CardHeader icon={faWifi} color="green" label={'html.label.connectionInfo'}/>
-            <PingTable countries={data?.table || []}/>
+            {data && <PingTable countries={data?.table || []}/>}
+            {!data && <ChartLoader/>}
         </Card>
     )
 };
diff --git a/Plan/react/dashboard/src/components/table/PingTable.js b/Plan/react/dashboard/src/components/table/PingTable.js
index 43843e453..00f0adc79 100644
--- a/Plan/react/dashboard/src/components/table/PingTable.js
+++ b/Plan/react/dashboard/src/components/table/PingTable.js
@@ -30,7 +30,7 @@ const PingTable = ({countries}) => {
                 </tr>
                 </thead>
                 <tbody>
-                {countries.length ? countries.map((country, i) => <PingRow key={i} country={country}/>) : <tr>
+                {countries.length ? countries.map(country => <PingRow key={country?.country} country={country}/>) : <tr>
                     <td>{t('generic.noData')}</td>
                     <td>-</td>
                     <td>-</td>