Add delay and spinner for station map, common const and component for delay

web/src/station/MapResult.tsx

@@ -4,7 +4,8 @@ import { coordToCity } from "./coordToCity";
 import { cityCoords } from "./cityCoords";
 import mapUrl from "../assets/map_1000x570.webp";
 import moment from "moment";
-import { apiHost } from "../consts";
+import { FETCH_DELAY_MS, apiHost } from "../consts";
+import { LoadingSpinner } from "../components/LoadingSpinner";
 
 export const MapResult: Component<{
     setCity: Setter<string | undefined>,
@@ -49,6 +50,8 @@ export const MapResult: Component<{
 
     const [meteoValues] = createResource(citiesFieldDate, async ([cities, field, start, end]: [Set<string>, string, Date, Date]) => {
         if (cities.size === 0) return;
+        await new Promise(resolve => setTimeout(resolve, FETCH_DELAY_MS));
+
         const queryStart = moment(start).format("YYYYMMDD_HHmm");
         const queryEnd = moment(end).format("YYYYMMDD_HHmm");
         let aggregate: string = "avg";
@@ -74,7 +77,17 @@ export const MapResult: Component<{
         );
     });
 
-    return <canvas ref={setCanvas} width={1000} height={570} />;
+    return (
+        <div>
+            { meteoValues.loading && <LoadingSpinner text="Drawing map..." /> }
+            <canvas
+                ref={setCanvas}
+                style={{ display: meteoValues.loading ? "none" : "block" }}
+                width={1000}
+                height={570}
+            />
+        </div>
+    );
 }
 
 function drawOnMap(

web/src/station/Result.tsx

@@ -1,5 +1,5 @@
 import { Accessor, Component, createResource } from "solid-js";
-import { apiHost } from "../consts";
+import { FETCH_DELAY_MS, apiHost } from "../consts";
 import moment from "moment";
 import { CityChart } from "../components/chart/CityChart";
 
@@ -14,7 +14,7 @@ export const Result: Component<{
 
     const fetchList = async ([city, field, getStart, getEnd]: [string | undefined, string, Date, Date]) => {
         if (city === undefined) return undefined;
-        await new Promise(resolve => setTimeout(resolve, 500));
+        await new Promise(resolve => setTimeout(resolve, FETCH_DELAY_MS));
         const response = await fetch(`${apiHost}/api/query/city/${city}/${queryStart()}-${queryEnd()}/hour/${field}/list`);
         const json = await response.json();
         return json;
@@ -22,7 +22,7 @@ export const Result: Component<{
 
     const fetchMeteo = async ([city, getStart, getEnd]: [string | undefined, Date, Date]) => {
         if (city === undefined) return undefined;
-        await new Promise(resolve => setTimeout(resolve, 500));
+        await new Promise(resolve => setTimeout(resolve, FETCH_DELAY_MS));
         const response = await fetch(`${apiHost}/api/query/city/${city}/${queryStart()}-${queryEnd()}/allFields`);
         const json = await response.json();
         return json;
@@ -63,10 +63,10 @@ export const Result: Component<{
             }
             { listResource() && props.getCity() && !listResource.loading &&
                 <div>
-                    <h3>{ props.getCity() }</h3>
+                    <h3>{ props.getCity() }: { props.getField() }</h3>
                     <CityChart
                         city={() => listResource().query.cities[0]}
-                        data={() => listResource().result[listResource().query.cities[0]]}
+                        data={() => listResource().result[listResource().query.cities[0]] ?? []}
                         query={() => listResource().query}
                     />
                 </div>