Add lazy load on router to improve bootstrap application performance (#2050)
✨ (routes.tsx): implement lazy loading for route components to improve performance ✨ (routes.tsx): add Suspense fallback with LoadingComponent for better UX during lazy loading
This commit is contained in:
Cristhian Zanforlin Lousa
GitHub
commit
610753fbff
1 changed files with 158 additions and 140 deletions
|
|
@ -1,87 +1,105 @@
|
||||||
|
import { Suspense, lazy } from "react";
|
||||||
import { Navigate, Route, Routes } from "react-router-dom";
|
import { Navigate, Route, Routes } from "react-router-dom";
|
||||||
import { ProtectedAdminRoute } from "./components/authAdminGuard";
|
import { ProtectedAdminRoute } from "./components/authAdminGuard";
|
||||||
import { ProtectedRoute } from "./components/authGuard";
|
import { ProtectedRoute } from "./components/authGuard";
|
||||||
import { ProtectedLoginRoute } from "./components/authLoginGuard";
|
import { ProtectedLoginRoute } from "./components/authLoginGuard";
|
||||||
import { CatchAllRoute } from "./components/catchAllRoutes";
|
import { CatchAllRoute } from "./components/catchAllRoutes";
|
||||||
|
import LoadingComponent from "./components/loadingComponent";
|
||||||
import { StoreGuard } from "./components/storeGuard";
|
import { StoreGuard } from "./components/storeGuard";
|
||||||
import AdminPage from "./pages/AdminPage";
|
|
||||||
import LoginAdminPage from "./pages/AdminPage/LoginPage";
|
const AdminPage = lazy(() => import("./pages/AdminPage"));
|
||||||
import ApiKeysPage from "./pages/ApiKeysPage";
|
const LoginAdminPage = lazy(() => import("./pages/AdminPage/LoginPage"));
|
||||||
import DeleteAccountPage from "./pages/DeleteAccountPage";
|
const ApiKeysPage = lazy(() => import("./pages/ApiKeysPage"));
|
||||||
import FlowPage from "./pages/FlowPage";
|
const DeleteAccountPage = lazy(() => import("./pages/DeleteAccountPage"));
|
||||||
import LoginPage from "./pages/LoginPage";
|
const FlowPage = lazy(() => import("./pages/FlowPage"));
|
||||||
import MyCollectionComponent from "./pages/MainPage/components/myCollectionComponent";
|
const LoginPage = lazy(() => import("./pages/LoginPage"));
|
||||||
import HomePage from "./pages/MainPage/pages/mainPage";
|
const MyCollectionComponent = lazy(
|
||||||
import PlaygroundPage from "./pages/Playground";
|
() => import("./pages/MainPage/components/myCollectionComponent"),
|
||||||
import SettingsPage from "./pages/SettingsPage";
|
);
|
||||||
import GeneralPage from "./pages/SettingsPage/pages/GeneralPage";
|
const HomePage = lazy(() => import("./pages/MainPage/pages/mainPage"));
|
||||||
import GlobalVariablesPage from "./pages/SettingsPage/pages/GlobalVariablesPage";
|
const PlaygroundPage = lazy(() => import("./pages/Playground"));
|
||||||
import ShortcutsPage from "./pages/SettingsPage/pages/ShortcutsPage";
|
const SettingsPage = lazy(() => import("./pages/SettingsPage"));
|
||||||
import SignUp from "./pages/SignUpPage";
|
const GeneralPage = lazy(
|
||||||
import StorePage from "./pages/StorePage";
|
() => import("./pages/SettingsPage/pages/GeneralPage"),
|
||||||
import ViewPage from "./pages/ViewPage";
|
);
|
||||||
|
const GlobalVariablesPage = lazy(
|
||||||
|
() => import("./pages/SettingsPage/pages/GlobalVariablesPage"),
|
||||||
|
);
|
||||||
|
const ShortcutsPage = lazy(
|
||||||
|
() => import("./pages/SettingsPage/pages/ShortcutsPage"),
|
||||||
|
);
|
||||||
|
const SignUp = lazy(() => import("./pages/SignUpPage"));
|
||||||
|
const StorePage = lazy(() => import("./pages/StorePage"));
|
||||||
|
const ViewPage = lazy(() => import("./pages/ViewPage"));
|
||||||
|
|
||||||
const Router = () => {
|
const Router = () => {
|
||||||
return (
|
return (
|
||||||
<Routes>
|
<Suspense
|
||||||
<Route
|
fallback={
|
||||||
path="/"
|
<div className="loading-page-panel">
|
||||||
element={
|
<LoadingComponent remSize={50} />
|
||||||
<ProtectedRoute>
|
</div>
|
||||||
<HomePage />
|
}
|
||||||
</ProtectedRoute>
|
>
|
||||||
}
|
<Routes>
|
||||||
>
|
|
||||||
<Route index element={<Navigate replace to={"all"} />} />
|
|
||||||
<Route
|
<Route
|
||||||
path="flows/*"
|
path="/"
|
||||||
element={<MyCollectionComponent key="flows" type="flow" />}
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<HomePage />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Route index element={<Navigate replace to={"all"} />} />
|
||||||
|
<Route
|
||||||
|
path="flows/*"
|
||||||
|
element={<MyCollectionComponent key="flows" type="flow" />}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="components/*"
|
||||||
|
element={
|
||||||
|
<MyCollectionComponent key="components" type="component" />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="all/*"
|
||||||
|
element={<MyCollectionComponent key="all" type="all" />}
|
||||||
|
/>
|
||||||
|
</Route>
|
||||||
|
<Route
|
||||||
|
path="/settings"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<SettingsPage />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Route index element={<Navigate replace to={"general"} />} />
|
||||||
|
<Route path="global-variables" element={<GlobalVariablesPage />} />
|
||||||
|
<Route path="general" element={<GeneralPage />} />
|
||||||
|
<Route path="shortcuts" element={<ShortcutsPage />} />
|
||||||
|
</Route>
|
||||||
|
<Route
|
||||||
|
path="/store"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<StoreGuard>
|
||||||
|
<StorePage />
|
||||||
|
</StoreGuard>
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
<Route
|
<Route
|
||||||
path="components/*"
|
path="/store/:id/"
|
||||||
element={<MyCollectionComponent key="components" type="component" />}
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<StoreGuard>
|
||||||
|
<StorePage />
|
||||||
|
</StoreGuard>
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
<Route
|
<Route path="/playground/:id/">
|
||||||
path="all/*"
|
|
||||||
element={<MyCollectionComponent key="all" type="all" />}
|
|
||||||
/>
|
|
||||||
</Route>
|
|
||||||
<Route
|
|
||||||
path="/settings"
|
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<SettingsPage />
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Route index element={<Navigate replace to={"general"} />} />
|
|
||||||
<Route path="global-variables" element={<GlobalVariablesPage />} />
|
|
||||||
<Route path="general" element={<GeneralPage />} />
|
|
||||||
<Route path="shortcuts" element={<ShortcutsPage />} />
|
|
||||||
</Route>
|
|
||||||
<Route
|
|
||||||
path="/store"
|
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<StoreGuard>
|
|
||||||
<StorePage />
|
|
||||||
</StoreGuard>
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Route
|
|
||||||
path="/store/:id/"
|
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<StoreGuard>
|
|
||||||
<StorePage />
|
|
||||||
</StoreGuard>
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Route path="/playground/:id/">
|
|
||||||
element=
|
|
||||||
{
|
|
||||||
<Route
|
<Route
|
||||||
path=""
|
path=""
|
||||||
element={
|
element={
|
||||||
|
|
@ -90,96 +108,96 @@ const Router = () => {
|
||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
}
|
</Route>
|
||||||
</Route>
|
<Route path="/flow/:id/">
|
||||||
<Route path="/flow/:id/">
|
<Route
|
||||||
|
path="*"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<FlowPage />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path=""
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<FlowPage />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="view"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<ViewPage />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Route>
|
||||||
<Route
|
<Route
|
||||||
path="*"
|
path="*"
|
||||||
element={
|
element={
|
||||||
<ProtectedRoute>
|
<ProtectedRoute>
|
||||||
<FlowPage />
|
<CatchAllRoute />
|
||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Route
|
<Route
|
||||||
path=""
|
path="/login"
|
||||||
element={
|
element={
|
||||||
<ProtectedRoute>
|
<ProtectedLoginRoute>
|
||||||
<FlowPage />
|
<LoginPage />
|
||||||
</ProtectedRoute>
|
</ProtectedLoginRoute>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<Route
|
<Route
|
||||||
path="view"
|
path="/signup"
|
||||||
element={
|
element={
|
||||||
<ProtectedRoute>
|
<ProtectedLoginRoute>
|
||||||
<ViewPage />
|
<SignUp />
|
||||||
</ProtectedRoute>
|
</ProtectedLoginRoute>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</Route>
|
|
||||||
<Route
|
|
||||||
path="*"
|
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<CatchAllRoute />
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Route
|
|
||||||
path="/login"
|
|
||||||
element={
|
|
||||||
<ProtectedLoginRoute>
|
|
||||||
<LoginPage />
|
|
||||||
</ProtectedLoginRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Route
|
|
||||||
path="/signup"
|
|
||||||
element={
|
|
||||||
<ProtectedLoginRoute>
|
|
||||||
<SignUp />
|
|
||||||
</ProtectedLoginRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Route
|
|
||||||
path="/login/admin"
|
|
||||||
element={
|
|
||||||
<ProtectedLoginRoute>
|
|
||||||
<LoginAdminPage />
|
|
||||||
</ProtectedLoginRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Route
|
|
||||||
path="/admin"
|
|
||||||
element={
|
|
||||||
<ProtectedAdminRoute>
|
|
||||||
<AdminPage />
|
|
||||||
</ProtectedAdminRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Route path="/account">
|
|
||||||
<Route
|
<Route
|
||||||
path="delete"
|
path="/login/admin"
|
||||||
element={
|
element={
|
||||||
<ProtectedRoute>
|
<ProtectedLoginRoute>
|
||||||
<DeleteAccountPage />
|
<LoginAdminPage />
|
||||||
</ProtectedRoute>
|
</ProtectedLoginRoute>
|
||||||
}
|
}
|
||||||
></Route>
|
/>
|
||||||
|
|
||||||
<Route
|
<Route
|
||||||
path="api-keys"
|
path="/admin"
|
||||||
element={
|
element={
|
||||||
<ProtectedRoute>
|
<ProtectedAdminRoute>
|
||||||
<ApiKeysPage />
|
<AdminPage />
|
||||||
</ProtectedRoute>
|
</ProtectedAdminRoute>
|
||||||
}
|
}
|
||||||
></Route>
|
/>
|
||||||
</Route>
|
|
||||||
</Routes>
|
<Route path="/account">
|
||||||
|
<Route
|
||||||
|
path="delete"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<DeleteAccountPage />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
></Route>
|
||||||
|
<Route
|
||||||
|
path="api-keys"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<ApiKeysPage />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
></Route>
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
|
</Suspense>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue