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 { 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 (
<Suspense
fallback={
<div className="loading-page-panel">
<LoadingComponent remSize={50} />
</div>
}
>
<Routes> <Routes>
<Route <Route
path="/" path="/"
@ -39,7 +57,9 @@ const Router = () => {
/> />
<Route <Route
path="components/*" path="components/*"
element={<MyCollectionComponent key="components" type="component" />} element={
<MyCollectionComponent key="components" type="component" />
}
/> />
<Route <Route
path="all/*" path="all/*"
@ -80,8 +100,6 @@ const Router = () => {
} }
/> />
<Route path="/playground/:id/"> <Route path="/playground/:id/">
element=
{
<Route <Route
path="" path=""
element={ element={
@ -90,7 +108,6 @@ const Router = () => {
</ProtectedRoute> </ProtectedRoute>
} }
/> />
}
</Route> </Route>
<Route path="/flow/:id/"> <Route path="/flow/:id/">
<Route <Route
@ -180,6 +197,7 @@ const Router = () => {
></Route> ></Route>
</Route> </Route>
</Routes> </Routes>
</Suspense>
); );
}; };