pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2026-02-06 18:45:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Lazy loading adds a loading state to the page (#13038)

Browse Source 
### What problem does this PR solve?

Fix: Lazy loading adds a loading state to the page

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
chanx
2026-02-06 16:20:52 +08:00
committed by GitHub
parent 301ed76aa4
commit c130ac0f88
2 changed files with 126 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/app.tsx
View File

@ -73,6 +73,7 @@ if (process.env.NODE_ENV === 'development') {
trackAllPureComponents: true, trackAllPureComponents: true,
trackExtraHooks: [], trackExtraHooks: [],
logOnDifferentValues: true, logOnDifferentValues: true,
exclude: [/^RouterProvider$/],
}); });
}, },
); );
@ -150,6 +151,13 @@ const RootProvider = ({ children }: React.PropsWithChildren) => {
); );
}; };
const RouterProviderWrapper: React.FC<{ router: typeof routers }> = ({
router,
}) => {
return <RouterProvider router={router}></RouterProvider>;
};
RouterProviderWrapper.whyDidYouRender = false;
export default function AppContainer() { export default function AppContainer() {
// const [router, setRouter] = useState<any>(null); // const [router, setRouter] = useState<any>(null);
@ -163,8 +171,7 @@ export default function AppContainer() {
return ( return (
<RootProvider> <RootProvider>
<RouterProvider router={routers}></RouterProvider> <RouterProviderWrapper router={routers} />
{/* <RouterProvider router={router}></RouterProvider> */}
</RootProvider> </RootProvider>
); );
} }

225
web/src/routes.tsx
View File

@ -1,4 +1,4 @@
import { lazy } from 'react'; import { lazy, Suspense } from 'react';
import { createBrowserRouter, Navigate, type RouteObject } from 'react-router'; import { createBrowserRouter, Navigate, type RouteObject } from 'react-router';
import FallbackComponent from './components/fallback-component'; import FallbackComponent from './components/fallback-component';
import { IS_ENTERPRISE } from './pages/admin/utils'; import { IS_ENTERPRISE } from './pages/admin/utils';
@ -66,252 +66,253 @@ export enum Routes {
AdminMonitoring = `${Admin}/monitoring`, AdminMonitoring = `${Admin}/monitoring`,
} }
const routeConfig = [ const defaultRouteFallback = (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1px]">
<div className="h-8 w-8 animate-spin rounded-full border-2 border-white/70 border-t-transparent" />
</div>
);
type LazyRouteConfig = Omit<RouteObject, 'Component' | 'children'> & {
Component?: () => Promise<{ default: React.ComponentType<any> }>;
children?: LazyRouteConfig[];
};
const withLazyRoute = (
importer: () => Promise<{ default: React.ComponentType<any> }>,
fallback: React.ReactNode = defaultRouteFallback,
) => {
const LazyComponent = lazy(importer);
const Wrapped: React.FC<any> = (props) => (
<Suspense fallback={fallback}>
<LazyComponent {...props} />
</Suspense>
);
Wrapped.displayName = `LazyRoute(${
(LazyComponent as unknown as React.ComponentType<any>).displayName ||
LazyComponent.name ||
'Component'
})`;
return Wrapped;
};
const routeConfigOptions = [
{ {
path: '/login', path: '/login',
Component: lazy(() => import('@/pages/login-next')), Component: () => import('@/pages/login-next'),
layout: false, layout: false,
errorElement: <FallbackComponent />,
}, },
{ {
path: '/login-next', path: '/login-next',
Component: lazy(() => import('@/pages/login-next')), Component: () => import('@/pages/login-next'),
layout: false, layout: false,
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.ChatShare, path: Routes.ChatShare,
Component: lazy(() => import('@/pages/next-chats/share')), Component: () => import('@/pages/next-chats/share'),
layout: false, layout: false,
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.AgentShare, path: Routes.AgentShare,
Component: lazy(() => import('@/pages/agent/share')), Component: () => import('@/pages/agent/share'),
layout: false, layout: false,
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.ChatWidget, path: Routes.ChatWidget,
Component: lazy(() => import('@/pages/next-chats/widget')), Component: () => import('@/pages/next-chats/widget'),
layout: false, layout: false,
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.AgentList, path: Routes.AgentList,
Component: lazy(() => import('@/pages/agents')), Component: () => import('@/pages/agents'),
errorElement: <FallbackComponent />,
}, },
{ {
path: '/document/:id', path: '/document/:id',
Component: lazy(() => import('@/pages/document-viewer')), Component: () => import('@/pages/document-viewer'),
layout: false, layout: false,
errorElement: <FallbackComponent />,
}, },
{ {
path: '/*', path: '/*',
Component: lazy(() => import('@/pages/404')), Component: () => import('@/pages/404'),
layout: false, layout: false,
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.Root, path: Routes.Root,
layout: false, layout: false,
Component: lazy(() => import('@/layouts/next')), Component: () => import('@/layouts/next'),
wrappers: ['@/wrappers/auth'], wrappers: ['@/wrappers/auth'],
children: [ children: [
{ {
path: Routes.Root, path: Routes.Root,
Component: lazy(() => import('@/pages/home')), Component: () => import('@/pages/home'),
}, },
], ],
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.Datasets, path: Routes.Datasets,
layout: false, layout: false,
Component: lazy(() => import('@/layouts/next')), Component: () => import('@/layouts/next'),
children: [ children: [
{ {
path: Routes.Datasets, path: Routes.Datasets,
Component: lazy(() => import('@/pages/datasets')), Component: () => import('@/pages/datasets'),
}, },
], ],
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.Chats, path: Routes.Chats,
layout: false, layout: false,
Component: lazy(() => import('@/layouts/next')), Component: () => import('@/layouts/next'),
children: [ children: [
{ {
path: Routes.Chats, path: Routes.Chats,
Component: lazy(() => import('@/pages/next-chats')), Component: () => import('@/pages/next-chats'),
}, },
], ],
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.Chat + '/:id', path: Routes.Chat + '/:id',
layout: false, layout: false,
Component: lazy(() => import('@/pages/next-chats/chat')), Component: () => import('@/pages/next-chats/chat'),
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.Searches, path: Routes.Searches,
layout: false, layout: false,
Component: lazy(() => import('@/layouts/next')), Component: () => import('@/layouts/next'),
children: [ children: [
{ {
path: Routes.Searches, path: Routes.Searches,
Component: lazy(() => import('@/pages/next-searches')), Component: () => import('@/pages/next-searches'),
}, },
], ],
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.Memories, path: Routes.Memories,
layout: false, layout: false,
Component: lazy(() => import('@/layouts/next')), Component: () => import('@/layouts/next'),
children: [ children: [
{ {
path: Routes.Memories, path: Routes.Memories,
Component: lazy(() => import('@/pages/memories')), Component: () => import('@/pages/memories'),
}, },
], ],
errorElement: <FallbackComponent />,
}, },
{ {
path: `${Routes.Memory}`, path: `${Routes.Memory}`,
layout: false, layout: false,
Component: lazy(() => import('@/layouts/next')), Component: () => import('@/layouts/next'),
children: [ children: [
{ {
path: `${Routes.Memory}`, path: `${Routes.Memory}`,
layout: false, layout: false,
Component: lazy(() => import('@/pages/memory')), Component: () => import('@/pages/memory'),
children: [ children: [
{ {
path: `${Routes.Memory}/${Routes.MemoryMessage}/:id`, path: `${Routes.Memory}/${Routes.MemoryMessage}/:id`,
Component: lazy(() => import('@/pages/memory/memory-message')), Component: () => import('@/pages/memory/memory-message'),
}, },
{ {
path: `${Routes.Memory}/${Routes.MemorySetting}/:id`, path: `${Routes.Memory}/${Routes.MemorySetting}/:id`,
Component: lazy(() => import('@/pages/memory/memory-setting')), Component: () => import('@/pages/memory/memory-setting'),
}, },
], ],
}, },
], ],
errorElement: <FallbackComponent />,
}, },
{ {
path: `${Routes.Search}/:id`, path: `${Routes.Search}/:id`,
layout: false, layout: false,
Component: lazy(() => import('@/pages/next-search')), Component: () => import('@/pages/next-search'),
errorElement: <FallbackComponent />,
}, },
{ {
path: `${Routes.SearchShare}`, path: `${Routes.SearchShare}`,
layout: false, layout: false,
Component: lazy(() => import('@/pages/next-search/share')), Component: () => import('@/pages/next-search/share'),
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.Agents, path: Routes.Agents,
layout: false, layout: false,
Component: lazy(() => import('@/layouts/next')), Component: () => import('@/layouts/next'),
children: [ children: [
{ {
path: Routes.Agents, path: Routes.Agents,
Component: lazy(() => import('@/pages/agents')), Component: () => import('@/pages/agents'),
}, },
], ],
errorElement: <FallbackComponent />,
}, },
{ {
path: `${Routes.AgentLogPage}/:id`, path: `${Routes.AgentLogPage}/:id`,
layout: false, layout: false,
Component: lazy(() => import('@/pages/agents/agent-log-page')), Component: () => import('@/pages/agents/agent-log-page'),
errorElement: <FallbackComponent />,
}, },
{ {
path: `${Routes.Agent}/:id`, path: `${Routes.Agent}/:id`,
layout: false, layout: false,
Component: lazy(() => import('@/pages/agent')), Component: () => import('@/pages/agent'),
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.AgentTemplates, path: Routes.AgentTemplates,
layout: false, layout: false,
Component: lazy(() => import('@/pages/agents/agent-templates')), Component: () => import('@/pages/agents/agent-templates'),
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.Files, path: Routes.Files,
layout: false, layout: false,
Component: lazy(() => import('@/layouts/next')), Component: () => import('@/layouts/next'),
children: [ children: [
{ {
path: Routes.Files, path: Routes.Files,
Component: lazy(() => import('@/pages/files')), Component: () => import('@/pages/files'),
}, },
], ],
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.DatasetBase, path: Routes.DatasetBase,
layout: false, layout: false,
Component: lazy(() => import('@/layouts/next')), Component: () => import('@/layouts/next'),
children: [ children: [
{ {
path: Routes.DatasetBase, path: Routes.DatasetBase,
element: <Navigate to={Routes.Dataset} replace />, element: <Navigate to={Routes.Dataset} replace />,
}, },
], ],
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.DatasetBase, path: Routes.DatasetBase,
layout: false, layout: false,
Component: lazy(() => import('@/pages/dataset')), Component: () => import('@/pages/dataset'),
children: [ children: [
{ {
path: `${Routes.Dataset}/:id`, path: `${Routes.Dataset}/:id`,
Component: lazy(() => import('@/pages/dataset/dataset')), Component: () => import('@/pages/dataset/dataset'),
}, },
{ {
path: `${Routes.DatasetBase}${Routes.DatasetTesting}/:id`, path: `${Routes.DatasetBase}${Routes.DatasetTesting}/:id`,
Component: lazy(() => import('@/pages/dataset/testing')), Component: () => import('@/pages/dataset/testing'),
}, },
{ {
path: `${Routes.DatasetBase}${Routes.KnowledgeGraph}/:id`, path: `${Routes.DatasetBase}${Routes.KnowledgeGraph}/:id`,
Component: lazy(() => import('@/pages/dataset/knowledge-graph')), Component: () => import('@/pages/dataset/knowledge-graph'),
}, },
{ {
path: `${Routes.DatasetBase}${Routes.DataSetOverview}/:id`, path: `${Routes.DatasetBase}${Routes.DataSetOverview}/:id`,
Component: lazy(() => import('@/pages/dataset/dataset-overview')), Component: () => import('@/pages/dataset/dataset-overview'),
}, },
{ {
path: `${Routes.DatasetBase}${Routes.DataSetSetting}/:id`, path: `${Routes.DatasetBase}${Routes.DataSetSetting}/:id`,
Component: lazy(() => import('@/pages/dataset/dataset-setting')), Component: () => import('@/pages/dataset/dataset-setting'),
}, },
], ],
errorElement: <FallbackComponent />,
}, },
{ {
path: `${Routes.DataflowResult}`, path: `${Routes.DataflowResult}`,
layout: false, layout: false,
Component: lazy(() => import('@/pages/dataflow-result')), Component: () => import('@/pages/dataflow-result'),
errorElement: <FallbackComponent />,
}, },
{ {
path: `${Routes.ParsedResult}/chunks`, path: `${Routes.ParsedResult}/chunks`,
layout: false, layout: false,
Component: lazy( Component: () =>
() => import('@/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk'),
import('@/pages/chunk/parsed-result/add-knowledge/components/knowledge-chunk'),
),
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.Chunk, path: Routes.Chunk,
@ -319,30 +320,28 @@ const routeConfig = [
children: [ children: [
{ {
path: Routes.Chunk, path: Routes.Chunk,
Component: lazy(() => import('@/pages/chunk')), Component: () => import('@/pages/chunk'),
children: [ children: [
{ {
path: `${Routes.ChunkResult}/:id`, path: `${Routes.ChunkResult}/:id`,
Component: lazy(() => import('@/pages/chunk/chunk-result')), Component: () => import('@/pages/chunk/chunk-result'),
}, },
{ {
path: `${Routes.ResultView}/:id`, path: `${Routes.ResultView}/:id`,
Component: lazy(() => import('@/pages/chunk/result-view')), Component: () => import('@/pages/chunk/result-view'),
}, },
], ],
}, },
], ],
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.Chunk, path: Routes.Chunk,
layout: false, layout: false,
Component: lazy(() => import('@/pages/chunk')), Component: () => import('@/pages/chunk'),
errorElement: <FallbackComponent />,
}, },
{ {
path: '/user-setting', path: '/user-setting',
Component: lazy(() => import('@/pages/user-setting')), Component: () => import('@/pages/user-setting'),
layout: false, layout: false,
children: [ children: [
{ {
@ -351,92 +350,87 @@ const routeConfig = [
}, },
{ {
path: '/user-setting/profile', path: '/user-setting/profile',
Component: lazy(() => import('@/pages/user-setting/profile')), Component: () => import('@/pages/user-setting/profile'),
}, },
{ {
path: '/user-setting/locale', path: '/user-setting/locale',
Component: lazy(() => import('@/pages/user-setting/setting-locale')), Component: () => import('@/pages/user-setting/setting-locale'),
}, },
{ {
path: '/user-setting/model', path: '/user-setting/model',
Component: lazy(() => import('@/pages/user-setting/setting-model')), Component: () => import('@/pages/user-setting/setting-model'),
}, },
{ {
path: '/user-setting/team', path: '/user-setting/team',
Component: lazy(() => import('@/pages/user-setting/setting-team')), Component: () => import('@/pages/user-setting/setting-team'),
}, },
{ {
path: `/user-setting${Routes.Api}`, path: `/user-setting${Routes.Api}`,
Component: lazy(() => import('@/pages/user-setting/setting-api')), Component: () => import('@/pages/user-setting/setting-api'),
}, },
{ {
path: `/user-setting${Routes.Mcp}`, path: `/user-setting${Routes.Mcp}`,
Component: lazy(() => import('@/pages/user-setting/mcp')), Component: () => import('@/pages/user-setting/mcp'),
}, },
{ {
path: `/user-setting${Routes.DataSource}`, path: `/user-setting${Routes.DataSource}`,
Component: lazy(() => import('@/pages/user-setting/data-source')), Component: () => import('@/pages/user-setting/data-source'),
}, },
], ],
errorElement: <FallbackComponent />,
}, },
{ {
path: `/user-setting${Routes.DataSource}${Routes.DataSourceDetailPage}`, path: `/user-setting${Routes.DataSource}${Routes.DataSourceDetailPage}`,
Component: lazy( Component: () =>
() => import('@/pages/user-setting/data-source/data-source-detail-page'), import('@/pages/user-setting/data-source/data-source-detail-page'),
),
layout: false, layout: false,
errorElement: <FallbackComponent />,
}, },
{ {
path: Routes.Admin, path: Routes.Admin,
Component: lazy(() => import('@/pages/admin/layouts/root-layout')), Component: () => import('@/pages/admin/layouts/root-layout'),
errorElement: <FallbackComponent />,
children: [ children: [
{ {
path: Routes.Admin, path: Routes.Admin,
Component: lazy(() => import('@/pages/admin/login')), Component: () => import('@/pages/admin/login'),
}, },
{ {
path: Routes.Admin, path: Routes.Admin,
Component: lazy( Component: () => import('@/pages/admin/layouts/authorized-layout'),
() => import('@/pages/admin/layouts/authorized-layout'),
),
children: [ children: [
{ {
path: `${Routes.AdminUserManagement}/:id`, path: `${Routes.AdminUserManagement}/:id`,
Component: lazy(() => import('@/pages/admin/user-detail')), Component: () => import('@/pages/admin/user-detail'),
}, },
{ {
Component: lazy( Component: () => import('@/pages/admin/layouts/navigation-layout'),
() => import('@/pages/admin/layouts/navigation-layout'),
),
children: [ children: [
{ {
path: Routes.AdminServices, path: Routes.AdminServices,
Component: lazy(() => import('@/pages/admin/service-status')), Component: () => import('@/pages/admin/service-status'),
}, },
{ {
path: Routes.AdminUserManagement, path: Routes.AdminUserManagement,
Component: lazy(() => import('@/pages/admin/users')), Component: () => import('@/pages/admin/users'),
}, },
{ {
path: Routes.AdminSandboxSettings, path: Routes.AdminSandboxSettings,
Component: lazy(() => import('@/pages/admin/sandbox-settings')), Component: () => import('@/pages/admin/sandbox-settings'),
}, },
...(IS_ENTERPRISE ...(IS_ENTERPRISE
? [ ? [
{ {
path: Routes.AdminWhitelist, path: Routes.AdminWhitelist,
Component: lazy(() => import('@/pages/admin/whitelist')), Component: () => import('@/pages/admin/whitelist'),
}, },
{ {
path: Routes.AdminRoles, path: Routes.AdminRoles,
Component: lazy(() => import('@/pages/admin/roles')), Component: () => import('@/pages/admin/roles'),
}, },
{ {
path: Routes.AdminMonitoring, path: Routes.AdminMonitoring,
Component: lazy(() => import('@/pages/admin/monitoring')), Component: () => import('@/pages/admin/monitoring'),
}, },
] ]
: []), : []),
@ -445,9 +439,24 @@ const routeConfig = [
], ],
}, },
], ],
} satisfies RouteObject, } satisfies LazyRouteConfig,
]; ];
const wrapRoutes = (routes: LazyRouteConfig[]): RouteObject[] =>
routes.map((item) => {
const { Component, children, ...rest } = item;
const next: RouteObject = { ...rest, errorElement: <FallbackComponent /> };
if (Component) {
next.Component = withLazyRoute(Component);
}
if (children) {
next.children = wrapRoutes(children);
}
return next;
});
const routeConfig = wrapRoutes(routeConfigOptions);
const routers = createBrowserRouter(routeConfig, { const routers = createBrowserRouter(routeConfig, {
basename: import.meta.env.VITE_BASE_URL || '/', basename: import.meta.env.VITE_BASE_URL || '/',
}); });