[#40] Rewrite SVG loader to fix conflict with react-router

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