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 {
-  DealerLayout,
-  DealersList,
-  ErrorPage,
-  LoginPageWithLanguageSelector,
-  LogoutPage,
-  QuoteCreate,
-  QuoteEdit,
-  SettingsEditor,
-  SettingsLayout,
-} from "./app";
-import { CatalogLayout, CatalogList } from "./app/catalog";
-import { DashboardPage } from "./app/dashboard";
-import { QuotesLayout } from "./app/quotes";
-import { QuotesList } from "./app/quotes/list";
-import { ProtectedRoute } from "./components";
+import { LoadingOverlay, ProtectedRoute } from "./components";
+
+// Lazy load components
+const DealerLayout = lazy(() => import("./app").then((m) => ({ default: m.DealerLayout })));
+const DealersList = lazy(() => import("./app").then((m) => ({ default: m.DealersList })));
+const ErrorPage = lazy(() => import("./app").then((m) => ({ default: m.ErrorPage })));
+const LoginPageWithLanguageSelector = lazy(() =>
+  import("./app").then((m) => ({ default: m.LoginPageWithLanguageSelector }))
+);
+const LogoutPage = lazy(() => import("./app").then((m) => ({ default: m.LogoutPage })));
+const QuoteCreate = lazy(() => import("./app").then((m) => ({ default: m.QuoteCreate })));
+const QuoteEdit = lazy(() => import("./app").then((m) => ({ default: m.QuoteEdit })));
+const SettingsEditor = lazy(() => import("./app").then((m) => ({ default: m.SettingsEditor })));
+const SettingsLayout = lazy(() => import("./app").then((m) => ({ default: m.SettingsLayout })));
+const CatalogLayout = lazy(() => import("./app").then((m) => ({ default: m.CatalogLayout })));
+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>
-          <Outlet />
-        </CatalogLayout>
+        <Suspense fallback={<LoadingOverlay />}>
+          <CatalogLayout>
+            <Outlet />
+          </CatalogLayout>
+        </Suspense>
       ),
       children: [
         {
           index: true,
-          element: <CatalogList />,
+          element: (
+            <Suspense fallback={<LoadingOverlay />}>
+              <CatalogList />
+            </Suspense>
+          ),
         },
       ],
     },
     {
       path: "/dealers",
       element: (
-        <DealerLayout>
-          <Outlet />
-        </DealerLayout>
+        <Suspense fallback={<LoadingOverlay />}>
+          <DealerLayout>
+            <Outlet />
+          </DealerLayout>
+        </Suspense>
       ),
       children: [
         {
           index: true,
-          element: <DealersList />,
+          element: (
+            <Suspense fallback={<LoadingOverlay />}>
+              <DealersList />
+            </Suspense>
+          ),
         },
       ],
     },
     {
       path: "/quotes",
       element: (
-        <QuotesLayout>
-          <Outlet />
-        </QuotesLayout>
+        <Suspense fallback={<LoadingOverlay />}>
+          <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>
-          <Outlet />
-        </SettingsLayout>
+        <Suspense fallback={<LoadingOverlay />}>
+          <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",