feat: Add loading indicator when features are being fetched

Refs: LIIK-482

Author: jforsman

map-view/src/App.tsx

@@ -11,6 +11,7 @@ import LayerSwitcher from "./components/LayerSwitcher";
 import FeatureInfo from "./components/FeatureInfo";
 import Map from "./common/Map";
 import { Feature, MapConfig } from "./models";
+import OngoingFetchInfo from "./components/OngoingFetchInfo";
 
 const drawWidth = "400px";
 
@@ -36,6 +37,7 @@ interface AppState {
   open: boolean;
   mapConfig: MapConfig | null;
   features: Feature[];
+  ongoingFeatureFetches: Set<string>;
 }
 
 class App extends React.Component<AppProps, AppState> {
@@ -47,6 +49,7 @@ class App extends React.Component<AppProps, AppState> {
       open: false,
       mapConfig: null,
       features: [],
+      ongoingFeatureFetches: new Set<string>(),
     };
   }
 
@@ -57,12 +60,15 @@ class App extends React.Component<AppProps, AppState> {
       });
       Map.initialize(this.mapId, mapConfig);
       Map.registerFeatureInfoCallback((features: Feature[]) => this.setState({ features }));
+      Map.registerOngoingFeatureFetchesCallback((fetches: Set<string>) =>
+        this.setState({ ongoingFeatureFetches: fetches }),
+      );
     });
   }
 
   render() {
     const { classes } = this.props;
-    const { open, mapConfig, features } = this.state;
+    const { open, mapConfig, features, ongoingFeatureFetches } = this.state;
     return (
       <React.StrictMode>
         <div className="App">
@@ -80,6 +86,9 @@ class App extends React.Component<AppProps, AppState> {
               }}
             />
           )}
+          {ongoingFeatureFetches.size > 0 && (
+            <OngoingFetchInfo layerIdentifiers={ongoingFeatureFetches}></OngoingFetchInfo>
+          )}
           <Fab
             size="medium"
             color="primary"

map-view/src/common/Map.ts

@@ -467,6 +467,10 @@ class Map {
     this.featureInfoCallback = fn;
   }
 
+  registerOngoingFeatureFetchesCallback(fn: (fetches: Set<string>) => void) {
+    this.ongoingFeatureFetchesCallback = fn;
+  }
+
   setVisibleBasemap(basemap: string) {
     // there can be only one visible base
     this.basemapLayers[this.visibleBasemap].setVisible(false);
@@ -491,7 +495,7 @@ class Map {
   getWfsUrl(overlayIdentifier: string, filterId?: string, filterValue?: string, ignoreBbox?: boolean) {
     const urlBuildResult = buildWFSQuery(
       overlayIdentifier,
-      ignoreBbox ? undefined :this.fetchedAreaPolygons[overlayIdentifier],
+      ignoreBbox ? undefined : this.fetchedAreaPolygons[overlayIdentifier],
       filterId,
       filterValue,
       ignoreBbox ? undefined : this.getCurrentBoundingBox(),
@@ -509,13 +513,16 @@ class Map {
       // nothing to fetch
       return;
     }
+
     const tempSource = isClustered ? this.createClusterSource(wfsUrl) : this.createNonClusteredSource(wfsUrl);
     const tempVectorSource = isClustered ? (tempSource as Cluster).getSource() : tempSource;
     if (!tempVectorSource) {
       console.log("No vector source, skipping getting new features");
       return;
     }
 
+    this.ongoingFeatureFetches.add(overlayIdentifier);
+    this.ongoingFeatureFetchesCallback(this.ongoingFeatureFetches);
     // create a temporary layer and add it to the map
     // to initialize data fetch
     const tempLayer = new VectorLayer({

map-view/src/components/OngoingFetchInfo.module.css

@@ -0,0 +1,26 @@
+.ongoingFetchInfoContainer {
+    position: fixed;
+    top: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000; /* Ensure it stays on top */
+
+    background-color: #fff; /* Using a neutral white, similar to Material-UI's background.paper */
+    padding: 16px; /* Equivalent to MUI padding: 2 (16px) */
+    border-radius: 8px; /* Equivalent to MUI borderRadius: 2 */
+    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); /* A common Material-UI shadow (boxShadow: 3) */
+    border: 1px solid #e0e0e0; /* Light grey border */
+    min-width: 200px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.centeredSpinner {
+    display: flex;
+    justify-content: center; /* Centers horizontally */
+    align-items: center; /* Centers vertically */
+    width: 100%;
+    min-height: 50px; /* Optional: Adjust height as needed to provide space */
+}

map-view/src/components/OngoingFetchInfo.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Box, Typography, List, ListItem, CircularProgress } from "@mui/material";
+import styles from "./OngoingFetchInfo.module.css";
+import { useTranslation } from "react-i18next";
+
+/**
+ * A React functional component that displays strings from a Set in a
+ * top-left corner box using Material-UI components.
+ *
+ * @param {object} props - The component's properties.
+ * @param {Set<string>} props.stringSet - The Set of strings to display.
+ */
+const OngoingFetchInfo = ({ layerIdentifiers = new Set<string>() }) => {
+  const { t } = useTranslation();
+  return (
+    // The main container for the display box, using Material-UI's Box component.
+    // The 'sx' prop is used for styling, similar to inline styles but with theming support.
+    <Box className={styles.ongoingFetchInfoContainer}>
+      <Box sx={{ mb: 1 }}>
+        <Typography variant="h6" component="h2">
+          {t("Active data fetches")}:
+        </Typography>
+      </Box>
+      {layerIdentifiers.size > 0 ? (
+        <>
+          <Box className={styles.centeredSpinner}>
+            <CircularProgress size={24} sx={{ color: "primary.main" }} />
+          </Box>
+          <List dense>
+            {/* dense makes the list items smaller */}
+            {/* Iterate over the Set and render each string as a Material-UI ListItem. */}
+            {Array.from(layerIdentifiers).map((str) => (
+              <ListItem key={str} disablePadding>
+                <Typography variant="body2">{str}</Typography>
+              </ListItem>
+            ))}
+          </List>
+        </>
+      ) : (
+        <Typography variant="body2" sx={{ fontStyle: "italic", color: "text.secondary" }}>
+          {t("No active data fetches")}:
+        </Typography>
+      )}
+    </Box>
+  );
+};
+
+export default OngoingFetchInfo;

map-view/src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+  const styles: { [key: string]: string };
+  export default styles;
+}

map-view/src/i18n.ts

@@ -15,7 +15,7 @@ i18n
       sv,
     },
     detection: {
-      order: ["path"],
+      order: ["path", "navigator"],
       lookupFromPathIndex: 0,
     },
     fallbackLng: "en",

map-view/src/index.tsx

@@ -3,13 +3,15 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import { StyledEngineProvider } from "@mui/material/styles";
-
-import "./i18n"; // needs to be bundled
+import { I18nextProvider } from "react-i18next";
+import i18n from "./i18n";
 
 const container = document.getElementById("root");
 const root = createRoot(container!);
 root.render(
   <StyledEngineProvider injectFirst>
-    <App />
+    <I18nextProvider i18n={i18n}>
+      <App />
+    </I18nextProvider>
   </StyledEngineProvider>,
 );

map-view/src/locale/en.json

@@ -11,6 +11,8 @@
     "Layers": "Layers",
     "Settings": "Settings",
     "Display Plan/Real difference": "Display Plan/Real difference",
-    "Filter by Project": "Filter by Project"
+    "Filter by Project": "Filter by Project",
+    "Active data fetches": "Active data fetches",
+    "No active data fetches": "No active data fetches"
   }
 }

map-view/src/locale/fi.json

@@ -11,6 +11,8 @@
     "Layers": "Tasot",
     "Settings": "Asetukset",
     "Display Plan/Real difference": "Näytä suunnitelman ja toteuman etäisyys",
-    "Filter by Project": "Suodata projektin perusteella"
+    "Filter by Project": "Suodata projektin perusteella",
+    "Active data fetches": "Aktiiviset tietojen haut",
+    "No active data fetches.": "Ei aktiivisia tietojen hakuja"
   }
 }

map-view/src/locale/sv.json

@@ -11,6 +11,8 @@
     "Layers": "Skikt",
     "Settings": "Inställningar",
     "Display Plan/Real difference": "Visa plan/implementering skillnad",
-    "Filter by Project": "Filtrera efter projekt"
+    "Filter by Project": "Filtrera efter projekt",
+    "Active data fetches": "Aktiva datahämtningar",
+    "No active data fetches.": "Inga aktiva datahämtningar."
   }
 }