From 108e3e0f67f5108977d580aec16c91cbeba5b75d Mon Sep 17 00:00:00 2001
From: Matthew Northcott <matthewnorthcott@catalyst.net.nz>
Date: Fri, 3 Feb 2023 14:37:34 +1300
Subject: [PATCH] [#40] Rewrite SVG loader to fix conflict with react-router

---
 .../diagrams/coastal_dune_and_bank_system.jsx |  2 ++
 .../src/components/diagrams/hill_slopes.jsx   |  2 ++
 .../diagrams/hill_slopes_features.jsx         |  2 ++
 .../components/diagrams/mangroves_section.jsx |  2 ++
 .../src/components/diagrams/maori_garden.jsx  |  2 ++
 .../components/diagrams/open_wetland_lake.jsx |  2 ++
 frontend/src/components/diagrams/riparian.jsx |  2 ++
 .../src/components/diagrams/rural_section.jsx |  2 ++
 .../src/components/diagrams/salt_marsh.jsx    |  2 ++
 .../src/components/diagrams/sand_dunes.jsx    |  2 ++
 .../diagrams/stormwater_treatment.jsx         |  2 ++
 .../transport_corridor_rail_section.jsx       |  2 ++
 .../transport_corridor_road_section.jsx       |  2 ++
 .../src/components/diagrams/urban_section.jsx |  2 ++
 frontend/src/components/steps/HabitatSVG.jsx  | 36 +++++++------------
 15 files changed, 40 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/components/diagrams/coastal_dune_and_bank_system.jsx
 create mode 100644 frontend/src/components/diagrams/hill_slopes.jsx
 create mode 100644 frontend/src/components/diagrams/hill_slopes_features.jsx
 create mode 100644 frontend/src/components/diagrams/mangroves_section.jsx
 create mode 100644 frontend/src/components/diagrams/maori_garden.jsx
 create mode 100644 frontend/src/components/diagrams/open_wetland_lake.jsx
 create mode 100644 frontend/src/components/diagrams/riparian.jsx
 create mode 100644 frontend/src/components/diagrams/rural_section.jsx
 create mode 100644 frontend/src/components/diagrams/salt_marsh.jsx
 create mode 100644 frontend/src/components/diagrams/sand_dunes.jsx
 create mode 100644 frontend/src/components/diagrams/stormwater_treatment.jsx
 create mode 100644 frontend/src/components/diagrams/transport_corridor_rail_section.jsx
 create mode 100644 frontend/src/components/diagrams/transport_corridor_road_section.jsx
 create mode 100644 frontend/src/components/diagrams/urban_section.jsx

diff --git a/frontend/src/components/diagrams/coastal_dune_and_bank_system.jsx b/frontend/src/components/diagrams/coastal_dune_and_bank_system.jsx
new file mode 100644
index 0000000..61d110b
--- /dev/null
+++ b/frontend/src/components/diagrams/coastal_dune_and_bank_system.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/coastal_dune_and_bank_system.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/hill_slopes.jsx b/frontend/src/components/diagrams/hill_slopes.jsx
new file mode 100644
index 0000000..943da06
--- /dev/null
+++ b/frontend/src/components/diagrams/hill_slopes.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/hill_slopes.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/hill_slopes_features.jsx b/frontend/src/components/diagrams/hill_slopes_features.jsx
new file mode 100644
index 0000000..7a3e7cb
--- /dev/null
+++ b/frontend/src/components/diagrams/hill_slopes_features.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/hill_slopes_features.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/mangroves_section.jsx b/frontend/src/components/diagrams/mangroves_section.jsx
new file mode 100644
index 0000000..0707488
--- /dev/null
+++ b/frontend/src/components/diagrams/mangroves_section.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/mangroves_section.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/maori_garden.jsx b/frontend/src/components/diagrams/maori_garden.jsx
new file mode 100644
index 0000000..dd627ec
--- /dev/null
+++ b/frontend/src/components/diagrams/maori_garden.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/maori_garden.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/open_wetland_lake.jsx b/frontend/src/components/diagrams/open_wetland_lake.jsx
new file mode 100644
index 0000000..2e601cf
--- /dev/null
+++ b/frontend/src/components/diagrams/open_wetland_lake.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/open_wetland_lake.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/riparian.jsx b/frontend/src/components/diagrams/riparian.jsx
new file mode 100644
index 0000000..6c169fc
--- /dev/null
+++ b/frontend/src/components/diagrams/riparian.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/riparian.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/rural_section.jsx b/frontend/src/components/diagrams/rural_section.jsx
new file mode 100644
index 0000000..2e73cd2
--- /dev/null
+++ b/frontend/src/components/diagrams/rural_section.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/rural_section.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/salt_marsh.jsx b/frontend/src/components/diagrams/salt_marsh.jsx
new file mode 100644
index 0000000..90d7693
--- /dev/null
+++ b/frontend/src/components/diagrams/salt_marsh.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/salt_marsh.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/sand_dunes.jsx b/frontend/src/components/diagrams/sand_dunes.jsx
new file mode 100644
index 0000000..8153c94
--- /dev/null
+++ b/frontend/src/components/diagrams/sand_dunes.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/sand_dunes.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/stormwater_treatment.jsx b/frontend/src/components/diagrams/stormwater_treatment.jsx
new file mode 100644
index 0000000..4580ed1
--- /dev/null
+++ b/frontend/src/components/diagrams/stormwater_treatment.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/stormwater_treatment.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/transport_corridor_rail_section.jsx b/frontend/src/components/diagrams/transport_corridor_rail_section.jsx
new file mode 100644
index 0000000..8bc623f
--- /dev/null
+++ b/frontend/src/components/diagrams/transport_corridor_rail_section.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/transport_corridor_rail_section.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/transport_corridor_road_section.jsx b/frontend/src/components/diagrams/transport_corridor_road_section.jsx
new file mode 100644
index 0000000..ca1b6de
--- /dev/null
+++ b/frontend/src/components/diagrams/transport_corridor_road_section.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/transport_corridor_road_section.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/diagrams/urban_section.jsx b/frontend/src/components/diagrams/urban_section.jsx
new file mode 100644
index 0000000..8ce5e82
--- /dev/null
+++ b/frontend/src/components/diagrams/urban_section.jsx
@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/urban_section.svg';
+export default ReactComponent;
diff --git a/frontend/src/components/steps/HabitatSVG.jsx b/frontend/src/components/steps/HabitatSVG.jsx
index 4fce2a0..4db5933 100644
--- a/frontend/src/components/steps/HabitatSVG.jsx
+++ b/frontend/src/components/steps/HabitatSVG.jsx
@@ -1,27 +1,15 @@
-import React from 'react';
+import { lazy, Suspense } from 'react';
+import { CircularProgress, Stack } from "@mui/material";
 
 export const HabitatSVG = ({ name, ...rest }) => {
-    const ImportedIconRef = React.useRef(null);
-    const [loading, setLoading] = React.useState(false);
-
-    React.useEffect(() => {
-        setLoading(true);
-        const importIcon = async () => {
-            try {
-                ImportedIconRef.current = (await import(`!!@svgr/webpack?-svgo,+titleProp,+ref!../../assets/img/habitatSVG/${name}.svg`)).default;
-            } catch (err) {
-                throw err;
-            } finally {
-                setLoading(false);
-            }
-        };
-        importIcon();
-    }, [name]);
-
-    if (!loading && ImportedIconRef.current) {
-        const { current: ImportedIcon } = ImportedIconRef;
-        return <ImportedIcon {...rest} />;
-    }
-
-    return null;
+  const Diagram = lazy(() => import(`../diagrams/${name}`));
+  const loadingComponent = (
+    <Stack alignItems="center">
+      <CircularProgress />
+    </Stack>
+  );
+  return (
+    <Suspense fallback={loadingComponent}>
+      <Diagram {...rest} />
+    </Suspense>);
 };