Fix a couple issues in the react frontend

- Fix card tabs not working with the new react router
- Fix server list card showing "No servers installed" while loading

Plan/react/dashboard/src/components/CardTabs.js

@@ -1,14 +1,15 @@
 import React, {useEffect, useState} from "react";
-import {useLocation} from "react-router-dom";
+import {useLocation, useNavigate} from "react-router-dom";
 import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 
 const TabButton = ({name, href, icon, color, active}) => {
+    const navigate = useNavigate();
     return (
         <li className="nav-item">
-            <a className={"nav-link col-black" + (active ? ' active' : '')} aria-selected={active} role="tab"
-               href={'#' + href}>
+            <button className={"nav-link col-black" + (active ? ' active' : '')} aria-selected={active} role="tab"
+                    onClick={() => navigate('#' + href, {replace: true})}>
                 <Fa icon={icon} className={'col-' + color}/> {name}
-            </a>
+            </button>
         </li>
     )
 }

Plan/react/dashboard/src/components/cards/network/ServersTableCard.js

@@ -7,6 +7,7 @@ import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome";
 import DropdownToggle from "react-bootstrap-v5/lib/esm/DropdownToggle";
 import DropdownMenu from "react-bootstrap-v5/lib/esm/DropdownMenu";
 import DropdownItem from "react-bootstrap-v5/lib/esm/DropdownItem";
+import {CardLoader} from "../../navigation/Loader";
 
 const SortDropDown = ({sortBy, sortReversed, setSortBy}) => {
     const {t} = useTranslation();
@@ -35,11 +36,15 @@ const SortDropDown = ({sortBy, sortReversed, setSortBy}) => {
     )
 }
 
-const ServersTableCard = ({servers, onSelect}) => {
+const ServersTableCard = ({loaded, servers, onSelect}) => {
     const {t} = useTranslation();
     const [sortBy, setSortBy] = useState(ServerSortOption.ALPHABETICAL);
     const [sortReversed, setSortReversed] = useState(false);
 
+    if (!loaded) {
+        return <CardLoader/>
+    }
+
     const setSort = option => {
         if (sortBy === option) {
             setSortReversed(!sortReversed);
@@ -62,10 +67,10 @@ const ServersTableCard = ({servers, onSelect}) => {
                 <p>It appears that Plan is not installed on any game servers or not connected to the same database.
                     See <a href="https://github.com/plan-player-analytics/Plan/wiki">wiki</a> for Network tutorial.</p>
             </Card.Body>}
-            {servers.length && <ServersTable servers={servers}
-                                             onSelect={onSelect}
-                                             sortBy={sortBy}
-                                             sortReversed={sortReversed}/>}
+            {Boolean(servers.length) && <ServersTable servers={servers}
+                                                      onSelect={onSelect}
+                                                      sortBy={sortBy}
+                                                      sortReversed={sortReversed}/>}
         </Card>
     )
 };

Plan/react/dashboard/src/views/network/NetworkServers.js

@@ -19,7 +19,8 @@ const NetworkServers = () => {
     return (
         <Row>
             <Col md={6}>
-                <ServersTableCard servers={data?.servers || []} onSelect={(index) => setSelectedServer(index)}/>
+                <ServersTableCard loaded={Boolean(data)} servers={data?.servers || []}
+                                  onSelect={(index) => setSelectedServer(index)}/>
             </Col>
             <Col md={6}>
                 {data?.servers.length && <QuickViewGraphCard server={data.servers[selectedServer]}/>}