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;

frontend/src/components/diagrams/hill_slopes.jsx

@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/hill_slopes.svg';
+export default ReactComponent;

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;

frontend/src/components/diagrams/mangroves_section.jsx

@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/mangroves_section.svg';
+export default ReactComponent;

frontend/src/components/diagrams/maori_garden.jsx

@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/maori_garden.svg';
+export default ReactComponent;

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;

frontend/src/components/diagrams/riparian.jsx

@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/riparian.svg';
+export default ReactComponent;

frontend/src/components/diagrams/rural_section.jsx

@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/rural_section.svg';
+export default ReactComponent;

frontend/src/components/diagrams/salt_marsh.jsx

@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/salt_marsh.svg';
+export default ReactComponent;

frontend/src/components/diagrams/sand_dunes.jsx

@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/sand_dunes.svg';
+export default ReactComponent;

frontend/src/components/diagrams/stormwater_treatment.jsx

@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/stormwater_treatment.svg';
+export default ReactComponent;

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;

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;

frontend/src/components/diagrams/urban_section.jsx

@@ -0,0 +1,2 @@
+import { ReactComponent } from '../../assets/img/habitatSVG/urban_section.svg';
+export default ReactComponent;

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>);
 };