MapPage - don't set loading on true when query[opts.paramName].length === 0, WarStatsPage - don't set loading on true when query[paramNamePlayer].length === 0 || query[paramNameTribe].length === 0

src/features/IndexPage/components/ServerSelection/GridItem.tsx

@@ -5,14 +5,12 @@ import * as NAMESPACES from '@config/namespaces';
 import { SERVER_STATUS } from '@config/app';
 
 import { makeStyles } from '@material-ui/core/styles';
-import { useTheme } from '@material-ui/core/styles';
 import {
   Grid,
   Accordion,
   Typography,
   AccordionSummary,
   AccordionDetails,
-  useMediaQuery,
   Tooltip,
 } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
@@ -28,14 +26,11 @@ import { Server } from './types';
 export interface Props {
   server?: Server;
   t: TFunction;
+  hideTooltip?: boolean;
 }
 
-function GridItem({ t, server }: Props) {
+function GridItem({ t, server, hideTooltip = true }: Props) {
   const classes = useStyles();
-  const theme = useTheme();
-  const isDownSM = useMediaQuery(theme.breakpoints.down('sm'));
-  const isTouchDevice = useMediaQuery('(hover: none)');
-  const hideTooltip = isDownSM || isTouchDevice;
   const [expanded, setExpanded] = React.useState<boolean>(false);
   const accordion = useRef<HTMLDivElement | null>(null);
 

src/features/IndexPage/components/ServerSelection/ServerSelection.tsx

@@ -4,7 +4,8 @@ import { useTranslation } from 'react-i18next';
 import useServers from './useServers';
 import * as NAMESPACES from '@config/namespaces';
 
-import { Grid, Box } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
+import { Grid, Box, useMediaQuery } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
 import Pagination, {
   Props as PaginationProps,
@@ -20,6 +21,10 @@ export default function ServerSelection() {
   });
   const { t } = useTranslation(NAMESPACES.INDEX_PAGE);
   const { servers, loading, total } = useServers(query.page, PER_PAGE);
+  const theme = useTheme();
+  const isDownSM = useMediaQuery(theme.breakpoints.down('sm'));
+  const isTouchDevice = useMediaQuery('(hover: none)');
+  const hideTooltip = isDownSM || isTouchDevice;
 
   const handlePageChange = (_: React.ChangeEvent<unknown>, page: number) => {
     setQuery({ page });
@@ -58,7 +63,14 @@ export default function ServerSelection() {
               return <GridItem t={t} key={index} />;
             })
           : servers.map(server => {
-              return <GridItem t={t} key={server.key} server={server} />;
+              return (
+                <GridItem
+                  t={t}
+                  key={server.key}
+                  server={server}
+                  hideTooltip={hideTooltip}
+                />
+              );
             })}
       </Grid>
       {renderPagination(false)}

src/features/ServerPage/features/MapPage/useMarkers.ts

@@ -35,10 +35,10 @@ const useMarkers = <T extends HasID, VariablesT>(
   client: ApolloClient<object>,
   opts: Options<VariablesT>
 ): MarkerBag<T> => {
-  const [loading, setLoading] = useState(true);
   const [query, setQuery] = useQueryParams({
     [opts.paramName]: withDefault(ArrayParam, []),
   });
+  const [loading, setLoading] = useState(query[opts.paramName].length > 0);
   const [markers, setMarkers] = useState<Marker<T>[]>([]);
 
   useEffect(() => {

src/features/ServerPage/features/WarStatsPage/useSide.ts

@@ -44,7 +44,6 @@ export type Bag = {
 };
 
 const useSide = (server: string, opts: Options): Bag => {
-  const [loading, setLoading] = useState<boolean>(true);
   const [players, setPlayers] = useState<Player[]>([]);
   const [tribes, setTribes] = useState<Tribe[]>([]);
   const paramNamePlayer = getParamName('player', opts.paramNamePrefix);
@@ -53,6 +52,9 @@ const useSide = (server: string, opts: Options): Bag => {
     [paramNamePlayer]: withDefault(NumericArrayParam, []),
     [paramNameTribe]: withDefault(NumericArrayParam, []),
   });
+  const [loading, setLoading] = useState<boolean>(
+    query[paramNamePlayer].length > 0 || query[paramNameTribe].length > 0
+  );
   const client = useApolloClient();
 
   useEffect(() => {