add memo cache, smaller toaster windows

interface/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { ToastContainer, Zoom } from 'react-toastify';
 
 import AppRouting from 'AppRouting';
@@ -8,7 +8,8 @@ import type { Locales } from 'i18n/i18n-types';
 import { loadLocaleAsync } from 'i18n/i18n-util.async';
 import { detectLocale, navigatorDetector } from 'typesafe-i18n/detectors';
 
-const availableLocales = [
+// Memoize available locales to prevent recreation on every render
+const AVAILABLE_LOCALES = [
   'de',
   'en',
   'it',
@@ -20,47 +21,59 @@ const availableLocales = [
   'sv',
   'tr',
   'cz'
-];
+] as Locales[];
 
-const App = () => {
+const App = memo(() => {
   const [wasLoaded, setWasLoaded] = useState(false);
   const [locale, setLocale] = useState<Locales>('en');
 
-  useEffect(() => {
+  // Memoize locale initialization to prevent unnecessary re-runs
-    // determine locale, take from session if set other default to browser language
+  const initializeLocale = useCallback(async () => {
-    const browserLocale = detectLocale('en', availableLocales, navigatorDetector);
+    const browserLocale = detectLocale('en', AVAILABLE_LOCALES, navigatorDetector);
     const newLocale = (localStorage.getItem('lang') || browserLocale) as Locales;
     localStorage.setItem('lang', newLocale);
     setLocale(newLocale);
-    void loadLocaleAsync(newLocale).then(() => setWasLoaded(true));
+    await loadLocaleAsync(newLocale);
+    setWasLoaded(true);
   }, []);
 
+  useEffect(() => {
+    void initializeLocale();
+  }, [initializeLocale]);
+
+  // Memoize toast container props to prevent recreation
+  const toastContainerProps = useMemo(
+    () => ({
+      position: 'bottom-left' as const,
+      autoClose: 3000,
+      hideProgressBar: false,
+      newestOnTop: false,
+      closeOnClick: true,
+      rtl: false,
+      pauseOnFocusLoss: true,
+      draggable: false,
+      pauseOnHover: false,
+      transition: Zoom,
+      closeButton: false,
+      theme: 'dark' as const,
+      toastStyle: {
+        border: '1px solid #177ac9',
+        width: 'fit-content'
+      }
+    }),
+    []
+  );
+
   if (!wasLoaded) return null;
 
   return (
     <TypesafeI18n locale={locale}>
       <CustomTheme>
         <AppRouting />
-        <ToastContainer
+        <ToastContainer {...toastContainerProps} />
-          position="bottom-left"
-          autoClose={3000}
-          hideProgressBar={false}
-          newestOnTop={false}
-          closeOnClick
-          rtl={false}
-          pauseOnFocusLoss
-          draggable={false}
-          pauseOnHover={false}
-          transition={Zoom}
-          closeButton={false}
-          theme="dark"
-          toastStyle={{
-            border: '1px solid #177ac9'
-          }}
-        />
       </CustomTheme>
     </TypesafeI18n>
   );
-};
+});
 
 export default App;