Carga dinámica

client/src/Routes.tsx

@@ -1,26 +1,34 @@
+import { Suspense, lazy } from "react";
 import { Navigate, Outlet, RouterProvider, createBrowserRouter } from "react-router-dom";
-import {
+import { LoadingOverlay, ProtectedRoute } from "./components";
-  DealerLayout,
+
-  DealersList,
+// Lazy load components
-  ErrorPage,
+const DealerLayout = lazy(() => import("./app").then((m) => ({ default: m.DealerLayout })));
-  LoginPageWithLanguageSelector,
+const DealersList = lazy(() => import("./app").then((m) => ({ default: m.DealersList })));
-  LogoutPage,
+const ErrorPage = lazy(() => import("./app").then((m) => ({ default: m.ErrorPage })));
-  QuoteCreate,
+const LoginPageWithLanguageSelector = lazy(() =>
-  QuoteEdit,
+  import("./app").then((m) => ({ default: m.LoginPageWithLanguageSelector }))
-  SettingsEditor,
+);
-  SettingsLayout,
+const LogoutPage = lazy(() => import("./app").then((m) => ({ default: m.LogoutPage })));
-} from "./app";
+const QuoteCreate = lazy(() => import("./app").then((m) => ({ default: m.QuoteCreate })));
-import { CatalogLayout, CatalogList } from "./app/catalog";
+const QuoteEdit = lazy(() => import("./app").then((m) => ({ default: m.QuoteEdit })));
-import { DashboardPage } from "./app/dashboard";
+const SettingsEditor = lazy(() => import("./app").then((m) => ({ default: m.SettingsEditor })));
-import { QuotesLayout } from "./app/quotes";
+const SettingsLayout = lazy(() => import("./app").then((m) => ({ default: m.SettingsLayout })));
-import { QuotesList } from "./app/quotes/list";
+const CatalogLayout = lazy(() => import("./app").then((m) => ({ default: m.CatalogLayout })));
-import { ProtectedRoute } from "./components";
+const CatalogList = lazy(() => import("./app").then((m) => ({ default: m.CatalogList })));
+const DashboardPage = lazy(() => import("./app").then((m) => ({ default: m.DashboardPage })));
+const QuotesLayout = lazy(() => import("./app").then((m) => ({ default: m.QuotesLayout })));
+const QuotesList = lazy(() => import("./app").then((m) => ({ default: m.QuotesList })));
 
 export const Routes = () => {
   const routesForErrors = [
     {
       path: "*",
-      Component: ErrorPage,
+      Element: (
+        <Suspense fallback={<LoadingOverlay />}>
+          <ErrorPage />
+        </Suspense>
+      ),
     },
   ];
 
@@ -38,71 +46,105 @@ export const Routes = () => {
       path: "/home",
       element: (
         <ProtectedRoute>
-          <DashboardPage />
+          <Suspense fallback={<LoadingOverlay />}>
+            <DashboardPage />
+          </Suspense>
         </ProtectedRoute>
       ),
     },
     {
       path: "/catalog",
       element: (
-        <CatalogLayout>
+        <Suspense fallback={<LoadingOverlay />}>
-          <Outlet />
+          <CatalogLayout>
-        </CatalogLayout>
+            <Outlet />
+          </CatalogLayout>
+        </Suspense>
       ),
       children: [
         {
           index: true,
-          element: <CatalogList />,
+          element: (
+            <Suspense fallback={<LoadingOverlay />}>
+              <CatalogList />
+            </Suspense>
+          ),
         },
       ],
     },
     {
       path: "/dealers",
       element: (
-        <DealerLayout>
+        <Suspense fallback={<LoadingOverlay />}>
-          <Outlet />
+          <DealerLayout>
-        </DealerLayout>
+            <Outlet />
+          </DealerLayout>
+        </Suspense>
       ),
       children: [
         {
           index: true,
-          element: <DealersList />,
+          element: (
+            <Suspense fallback={<LoadingOverlay />}>
+              <DealersList />
+            </Suspense>
+          ),
         },
       ],
     },
     {
       path: "/quotes",
       element: (
-        <QuotesLayout>
+        <Suspense fallback={<LoadingOverlay />}>
-          <Outlet />
+          <QuotesLayout>
-        </QuotesLayout>
+            <Outlet />
+          </QuotesLayout>
+        </Suspense>
       ),
       children: [
         {
           index: true,
-          element: <QuotesList />,
+          element: (
+            <Suspense fallback={<LoadingOverlay />}>
+              <QuotesList />
+            </Suspense>
+          ),
         },
         {
           path: "add",
-          element: <QuoteCreate />,
+          element: (
+            <Suspense fallback={<LoadingOverlay />}>
+              <QuoteCreate />
+            </Suspense>
+          ),
         },
         {
           path: "edit/:id",
-          element: <QuoteEdit />,
+          element: (
+            <Suspense fallback={<LoadingOverlay />}>
+              <QuoteEdit />
+            </Suspense>
+          ),
         },
       ],
     },
     {
       path: "/settings",
       element: (
-        <SettingsLayout>
+        <Suspense fallback={<LoadingOverlay />}>
-          <Outlet />
+          <SettingsLayout>
-        </SettingsLayout>
+            <Outlet />
+          </SettingsLayout>
+        </Suspense>
       ),
       children: [
         {
           index: true,
-          element: <SettingsEditor />,
+          element: (
+            <Suspense fallback={<LoadingOverlay />}>
+              <SettingsEditor />
+            </Suspense>
+          ),
         },
       ],
     },
@@ -116,7 +158,11 @@ export const Routes = () => {
   const routesForNotAuthenticatedOnly = [
     {
       path: "/login",
-      Component: LoginPageWithLanguageSelector,
+      element: (
+        <Suspense fallback={<LoadingOverlay />}>
+          <LoginPageWithLanguageSelector />
+        </Suspense>
+      ),
     },
   ];
 

client/src/locales/en.json

@@ -1,6 +1,7 @@
 {
   "translation": {
     "common": {
+      "loading": "Loading...",
       "required": "required",
       "cancel": "Cancel",
       "no": "No",

client/src/locales/es.json

@@ -1,6 +1,7 @@
 {
   "translation": {
     "common": {
+      "loading": "Cargando...",
       "required": "obligatorio",
       "cancel": "Cancelar",
       "no": "No",