Fix small issues with PingTable

Author: AuroraLS3

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>
     )
 };

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>