Shiv

.babelrc

@@ -1,6 +1,23 @@
 {
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ]
-}
+	"presets": ["@babel/preset-env", "@babel/preset-react"],
+	"plugins": [
+		[
+			"babel-plugin-import",
+			{
+				"libraryName": "@mui/material",
+				"libraryDirectory": "",
+				"camel2DashComponentName": false
+			},
+			"core"
+		],
+		[
+			"babel-plugin-import",
+			{
+				"libraryName": "@mui/icons-material",
+				"libraryDirectory": "",
+				"camel2DashComponentName": false
+			},
+			"icons"
+		]
+	]
+}

package.json

@@ -77,6 +77,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/react-helmet": "^6.1.11",
     "babel-loader": "^9.1.2",
+    "babel-plugin-import": "^1.13.8",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
@@ -92,5 +93,6 @@
     "terser-webpack-plugin": "^5.3.7",
     "url-loader": "^4.1.1",
     "webpack": "^5.77.0"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/App.js

@@ -1,8 +1,7 @@
-import React, { lazy, Suspense, useEffect } from "react";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import i18next from "i18next";
+import React, { lazy, Suspense, useEffect } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
-import CircularProgress from "@mui/material/CircularProgress";
 import "./App.css";
 import ModalRoot from "./components/ModalRoot";
 import { theme } from "./theme";
@@ -17,87 +16,81 @@ const DetailReworked = lazy(() => import("./views/Main/DetailReworked"));
 const Search = lazy(() => import("./components/Search/Search"));
 
 function App() {
-  //check if first visit and change code to domain language
-  if (!localStorage.getItem("visited")) {
-    let domain = getTopLevelDomain();
-    //switch to domain language
-    switch (domain) {
-      case "si":
-        i18next.changeLanguage("sl");
-        break;
-      case "fr":
-        i18next.changeLanguage("fr");
-        break;
-      case "it":
-        i18next.changeLanguage("it");
-        break;
-      default:
-        i18next.changeLanguage("de");
-        break;
-    }
-    localStorage.setItem("visited", true);
-  }
+	//check if first visit and change code to domain language
+	if (!localStorage.getItem("visited")) {
+		let domain = getTopLevelDomain();
+		//switch to domain language
+		switch (domain) {
+			case "si":
+				i18next.changeLanguage("sl");
+				break;
+			case "fr":
+				i18next.changeLanguage("fr");
+				break;
+			case "it":
+				i18next.changeLanguage("it");
+				break;
+			default:
+				i18next.changeLanguage("de");
+				break;
+		}
+		localStorage.setItem("visited", true);
+	}
 
-  // Matomo tracking
-  const _mtm = (window._mtm = window._mtm || []);
-  useEffect(() => {
-    _mtm.push({
-      "mtm.startTime": new Date().getTime(),
-      event: "mtm.Start",
-    });
-    const d = document,
-      g = d.createElement("script"),
-      s = d.getElementsByTagName("script")[0];
-    g.async = true;
-    g.src = "https://stats.bahnzumberg.at/js/container_ANAXmMKf.js";
-    s.parentNode.insertBefore(g, s);
-    _mtm.push({ language: i18next.resolvedLanguage });
-  }, []);
+	// Matomo tracking
+	const _mtm = (window._mtm = window._mtm || []);
+	useEffect(() => {
+		_mtm.push({
+			"mtm.startTime": new Date().getTime(),
+			event: "mtm.Start",
+		});
+		const d = document,
+			g = d.createElement("script"),
+			s = d.getElementsByTagName("script")[0];
+		g.defer = true;
+		g.src = "https://stats.bahnzumberg.at/js/container_ANAXmMKf.js";
+		s.parentNode.insertBefore(g, s);
+		_mtm.push({ language: i18next.resolvedLanguage });
+	}, []);
 
-  return (
-    <ThemeProvider theme={theme}>
-      <div
-        className="App"
-        style={{
-          minHeight: "100vh",
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        <Routes>
-          <Route path="/" element={<Start />} />
-          <Route path="/total" element={<Start />} />
-        </Routes>
-        <Suspense
-          fallback={
-            <div
-              style={{
-                height: "100%",
-                width: "100%",
-                padding: "20px",
-              }}
-            >
-              <CircularProgress />
-            </div>
-          }
-        >
-          <Routes>
-            <Route path="/search" element={<Main />} />
-            <Route path="/tour/:idOne/:cityOne" element={<DetailReworked />} />
-            <Route path="/tour" element={<DetailReworked />} />
-            <Route path="/provider/:provider" element={<DetailReworked />} />
-            <Route path="/imprint" element={<Impressum />} />
-            <Route path="/privacy" element={<Privacy />} />
-            <Route path="/:city" element={<Main />} />
-            <Route path="/searchPhrases" element={<Search />} />
+	return (
+		<ThemeProvider theme={theme}>
+			<div
+				className="App"
+				style={{
+					minHeight: "100vh",
+					display: "flex",
+					flexDirection: "column",
+				}}
+			>
+				<Routes>
+					<Route path="/" element={<Start />} />
+					<Route path="/total" element={<Start />} />
+				</Routes>
+				<Suspense fallback={<></>}>
+					<Routes>
+						<Route path="/search" element={<Main />} />
+						<Route
+							path="/tour/:idOne/:cityOne"
+							element={<DetailReworked />}
+						/>
+						<Route path="/tour" element={<DetailReworked />} />
+						<Route
+							path="/provider/:provider"
+							element={<DetailReworked />}
+						/>
+						<Route path="/imprint" element={<Impressum />} />
+						<Route path="/privacy" element={<Privacy />} />
+						<Route path="/:city" element={<Main />} />
+						<Route path="/searchPhrases" element={<Search />} />
 
-            <Route path="*" element={<Navigate to="/" replace />} />
-          </Routes>
-        </Suspense>
-      </div>
-      <ModalRoot />
-    </ThemeProvider>
-  );
+						<Route path="*" element={<Navigate to="/" replace />} />
+					</Routes>
+				</Suspense>
+			</div>
+			<ModalRoot />
+		</ThemeProvider>
+	);
 }
 
 export default App;