Hinzufügen und Löschen Dialoge in den Tabellen hinzugefügt

buildtime/client/material-editor/src/App.tsx

@@ -1,22 +1,30 @@
+import { Suspense, lazy, type ComponentType } from 'react'
 import { createBrowserRouter, RouterProvider } from 'react-router'
-import Layout from './Layout.tsx'
-import HomePage from './pages/HomePage.tsx'
-import LanguagesPage from './pages/LanguagesPage.tsx'
-import PropertyPage from './pages/PropertyPage.tsx'
-import NotFoundPage from './pages/NotFoundPage.tsx'
 
 import './App.css'
 
+const Layout = lazy(() => import('./Layout.tsx'))
+const HomePage = lazy(() => import('./pages/HomePage.tsx'))
+const LanguagesPage = lazy(() => import('./pages/LanguagesPage.tsx'))
+const PropertyPage = lazy(() => import('./pages/PropertyPage.tsx'))
+const NotFoundPage = lazy(() => import('./pages/NotFoundPage.tsx'))
+
+const renderLazyRoute = (Component: ComponentType) => (
+  <Suspense fallback={<div>Loading...</div>}>
+    <Component />
+  </Suspense>
+)
+
 // routing configuration
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <Layout />,
+    element: renderLazyRoute(Layout),
     children: [
-      { index: true, element: <HomePage /> },
-      { path: 'language', element: <LanguagesPage /> },
-      { path: 'propertypool', element: <PropertyPage /> },
-      { path: '*', element: <NotFoundPage /> },
+      { index: true, element: renderLazyRoute(HomePage) },
+      { path: 'language', element: renderLazyRoute(LanguagesPage) },
+      { path: 'propertypool', element: renderLazyRoute(PropertyPage) },
+      { path: '*', element: renderLazyRoute(NotFoundPage) },
     ],
   },
 ])