jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add lazy load on router to improve bootstrap application performance (#2050)

Browse source 
✨ (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 2024-06-04 17:50:45 -03:00 • committed by GitHub
commit 610753fbff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 158 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/frontend/src/routes.tsx
View file

@ -1,28 +1,46 @@
import { Suspense, lazy } from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import { ProtectedAdminRoute } from "./components/authAdminGuard";
import { ProtectedRoute } from "./components/authGuard";
import { ProtectedLoginRoute } from "./components/authLoginGuard";
import { CatchAllRoute } from "./components/catchAllRoutes";
import LoadingComponent from "./components/loadingComponent";
import { StoreGuard } from "./components/storeGuard";
import AdminPage from "./pages/AdminPage";
import LoginAdminPage from "./pages/AdminPage/LoginPage";
import ApiKeysPage from "./pages/ApiKeysPage";
import DeleteAccountPage from "./pages/DeleteAccountPage";
import FlowPage from "./pages/FlowPage";
import LoginPage from "./pages/LoginPage";
import MyCollectionComponent from "./pages/MainPage/components/myCollectionComponent";
import HomePage from "./pages/MainPage/pages/mainPage";
import PlaygroundPage from "./pages/Playground";
import SettingsPage from "./pages/SettingsPage";
import GeneralPage from "./pages/SettingsPage/pages/GeneralPage";
import GlobalVariablesPage from "./pages/SettingsPage/pages/GlobalVariablesPage";
import ShortcutsPage from "./pages/SettingsPage/pages/ShortcutsPage";
import SignUp from "./pages/SignUpPage";
import StorePage from "./pages/StorePage";
import ViewPage from "./pages/ViewPage";
const AdminPage = lazy(() => import("./pages/AdminPage"));
const LoginAdminPage = lazy(() => import("./pages/AdminPage/LoginPage"));
const ApiKeysPage = lazy(() => import("./pages/ApiKeysPage"));
const DeleteAccountPage = lazy(() => import("./pages/DeleteAccountPage"));
const FlowPage = lazy(() => import("./pages/FlowPage"));
const LoginPage = lazy(() => import("./pages/LoginPage"));
const MyCollectionComponent = lazy(
() => import("./pages/MainPage/components/myCollectionComponent"),
);
const HomePage = lazy(() => import("./pages/MainPage/pages/mainPage"));
const PlaygroundPage = lazy(() => import("./pages/Playground"));
const SettingsPage = lazy(() => import("./pages/SettingsPage"));
const GeneralPage = lazy(
() => import("./pages/SettingsPage/pages/GeneralPage"),
);
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 = () => {
return (
<Suspense
fallback={
<div className="loading-page-panel">
<LoadingComponent remSize={50} />
</div>
}
>
<Routes>
<Route
path="/"
@ -39,7 +57,9 @@ const Router = () => {
/>
<Route
path="components/*"
element={<MyCollectionComponent key="components" type="component" />}
element={
<MyCollectionComponent key="components" type="component" />
}
/>
<Route
path="all/*"
@ -80,8 +100,6 @@ const Router = () => {
}
/>
<Route path="/playground/:id/">
element=
{
<Route
path=""
element={
@ -90,7 +108,6 @@ const Router = () => {
</ProtectedRoute>
}
/>
}
</Route>
<Route path="/flow/:id/">
<Route
@ -180,6 +197,7 @@ const Router = () => {
></Route>
</Route>
</Routes>
</Suspense>
);
};