yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-23 16:38:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix #5292 lazy loading added for development and production. (#5294)

Browse Source 
Co-authored-by: yug shah <yugshah0106@gmail.com>
This commit is contained in:
Shailesh Parmar 2022-06-04 00:24:26 +05:30 committed by GitHub
parent cae834d671
commit 3f682b6685
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 148 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
openmetadata-ui/src/main/resources/ui/src/router/AppRouter.tsx
View File

@ -18,9 +18,17 @@ import Appbar from '../components/app-bar/Appbar';
import Loader from '../components/Loader/Loader'; import Loader from '../components/Loader/Loader';
import { ROUTES } from '../constants/constants'; import { ROUTES } from '../constants/constants';
import { AuthTypes } from '../enums/signin.enum'; import { AuthTypes } from '../enums/signin.enum';
import SigninPage from '../pages/login'; import withSuspenseFallback from './withSuspenseFallback';
import PageNotFound from '../pages/page-not-found';
import AuthenticatedAppRouter from './AuthenticatedAppRouter'; const AuthenticatedAppRouter = withSuspenseFallback(
React.lazy(() => import('./AuthenticatedAppRouter'))
);
const SigninPage = withSuspenseFallback(
React.lazy(() => import('../pages/login'))
);
const PageNotFound = withSuspenseFallback(
React.lazy(() => import('../pages/page-not-found'))
);
const AppRouter = () => { const AppRouter = () => {
const { const {

158
openmetadata-ui/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx
View File

@ -17,39 +17,131 @@ import { Redirect, Route, Switch } from 'react-router-dom';
import AppState from '../AppState'; import AppState from '../AppState';
import AddCustomProperty from '../components/CustomEntityDetail/AddCustomProperty/AddCustomProperty'; import AddCustomProperty from '../components/CustomEntityDetail/AddCustomProperty/AddCustomProperty';
import { ROUTES } from '../constants/constants'; import { ROUTES } from '../constants/constants';
import AddGlossaryPage from '../pages/AddGlossary/AddGlossaryPage.component'; import withSuspenseFallback from './withSuspenseFallback';
import AddGlossaryTermPage from '../pages/AddGlossaryTermPage/AddGlossaryTermPage.component';
import AddIngestionPage from '../pages/AddIngestionPage/AddIngestionPage.component'; const MyDataPage = withSuspenseFallback(
import AddServicePage from '../pages/AddServicePage/AddServicePage.component'; React.lazy(() => import('../pages/MyDataPage/MyDataPage.component'))
import AddWebhookPage from '../pages/AddWebhookPage/AddWebhookPage.component'; );
import BotsListPage from '../pages/BotsListpage/BotsListpage.component';
import BotsPage from '../pages/BotsPage/BotsPage.component'; const PipelineDetailsPage = withSuspenseFallback(
import CreateUserPage from '../pages/CreateUserPage/CreateUserPage.component'; React.lazy(
import CustomPropertiesPage from '../pages/CustomPropertiesPage/CustomPropertiesPage'; () => import('../pages/PipelineDetails/PipelineDetailsPage.component')
import DashboardDetailsPage from '../pages/DashboardDetailsPage/DashboardDetailsPage.component'; )
import DatabaseDetails from '../pages/database-details/index'; );
import DatabaseSchemaPageComponent from '../pages/DatabaseSchemaPage/DatabaseSchemaPage.component';
import DatasetDetailsPage from '../pages/DatasetDetailsPage/DatasetDetailsPage.component'; const RolesPage = withSuspenseFallback(
import EditIngestionPage from '../pages/EditIngestionPage/EditIngestionPage.component'; React.lazy(() => import('../pages/RolesPage/RolesPage.component'))
import EditWebhookPage from '../pages/EditWebhookPage/EditWebhookPage.component'; );
import EntityVersionPage from '../pages/EntityVersionPage/EntityVersionPage.component'; const ServicePage = withSuspenseFallback(
import ExplorePage from '../pages/explore/ExplorePage.component'; React.lazy(() => import('../pages/service'))
import GlossaryPageV1 from '../pages/GlossaryPage/GlossaryPageV1.component'; );
import MlModelPage from '../pages/MlModelPage/MlModelPage.component'; const ServicesPage = withSuspenseFallback(
import MyDataPage from '../pages/MyDataPage/MyDataPage.component'; React.lazy(() => import('../pages/services'))
import PipelineDetailsPage from '../pages/PipelineDetails/PipelineDetailsPage.component'; );
import RolesPage from '../pages/RolesPage/RolesPage.component'; const SignupPage = withSuspenseFallback(
import ServicePage from '../pages/service'; React.lazy(() => import('../pages/signup'))
import ServicesPage from '../pages/services'; );
import SignupPage from '../pages/signup'; const SwaggerPage = withSuspenseFallback(
import SwaggerPage from '../pages/swagger'; React.lazy(() => import('../pages/swagger'))
import TagsPage from '../pages/tags'; );
import TeamsAndUsersPage from '../pages/TeamsAndUsersPage/TeamsAndUsersPage.component'; const TagsPage = withSuspenseFallback(
import TopicDetailsPage from '../pages/TopicDetails/TopicDetailsPage.component'; React.lazy(() => import('../pages/tags'))
import TourPageComponent from '../pages/tour-page/TourPage.component'; );
import UserPage from '../pages/UserPage/UserPage.component'; const TeamsAndUsersPage = withSuspenseFallback(
import WebhooksPage from '../pages/WebhooksPage/WebhooksPage.component'; React.lazy(
import AdminProtectedRoute from './AdminProtectedRoute'; () => import('../pages/TeamsAndUsersPage/TeamsAndUsersPage.component')
)
);
const TopicDetailsPage = withSuspenseFallback(
React.lazy(() => import('../pages/TopicDetails/TopicDetailsPage.component'))
);
const TourPageComponent = withSuspenseFallback(
React.lazy(() => import('../pages/tour-page/TourPage.component'))
);
const UserPage = withSuspenseFallback(
React.lazy(() => import('../pages/UserPage/UserPage.component'))
);
const WebhooksPage = withSuspenseFallback(
React.lazy(() => import('../pages/WebhooksPage/WebhooksPage.component'))
);
const AdminProtectedRoute = withSuspenseFallback(
React.lazy(() => import('./AdminProtectedRoute'))
);
const AddGlossaryPage = withSuspenseFallback(
React.lazy(() => import('../pages/AddGlossary/AddGlossaryPage.component'))
);
const AddGlossaryTermPage = withSuspenseFallback(
React.lazy(
() => import('../pages/AddGlossaryTermPage/AddGlossaryTermPage.component')
)
);
const AddIngestionPage = withSuspenseFallback(
React.lazy(
() => import('../pages/AddIngestionPage/AddIngestionPage.component')
)
);
const AddServicePage = withSuspenseFallback(
React.lazy(() => import('../pages/AddServicePage/AddServicePage.component'))
);
const AddWebhookPage = withSuspenseFallback(
React.lazy(() => import('../pages/AddWebhookPage/AddWebhookPage.component'))
);
const BotsListPage = withSuspenseFallback(
React.lazy(() => import('../pages/BotsListpage/BotsListpage.component'))
);
const BotsPage = withSuspenseFallback(
React.lazy(() => import('../pages/BotsPage/BotsPage.component'))
);
const CreateUserPage = withSuspenseFallback(
React.lazy(() => import('../pages/CreateUserPage/CreateUserPage.component'))
);
const DashboardDetailsPage = withSuspenseFallback(
React.lazy(
() => import('../pages/DashboardDetailsPage/DashboardDetailsPage.component')
)
);
const DatabaseDetails = withSuspenseFallback(
React.lazy(() => import('../pages/database-details/index'))
);
const DatabaseSchemaPageComponent = withSuspenseFallback(
React.lazy(
() => import('../pages/DatabaseSchemaPage/DatabaseSchemaPage.component')
)
);
const DatasetDetailsPage = withSuspenseFallback(
React.lazy(
() => import('../pages/DatasetDetailsPage/DatasetDetailsPage.component')
)
);
const EditIngestionPage = withSuspenseFallback(
React.lazy(
() => import('../pages/EditIngestionPage/EditIngestionPage.component')
)
);
const EditWebhookPage = withSuspenseFallback(
React.lazy(() => import('../pages/EditWebhookPage/EditWebhookPage.component'))
);
const EntityVersionPage = withSuspenseFallback(
React.lazy(
() => import('../pages/EntityVersionPage/EntityVersionPage.component')
)
);
const ExplorePage = withSuspenseFallback(
React.lazy(() => import('../pages/explore/ExplorePage.component'))
);
const GlossaryPageV1 = withSuspenseFallback(
React.lazy(() => import('../pages/GlossaryPage/GlossaryPageV1.component'))
);
const MlModelPage = withSuspenseFallback(
React.lazy(() => import('../pages/MlModelPage/MlModelPage.component'))
);
const CustomPropertiesPage = withSuspenseFallback(
React.lazy(() => import('../pages/CustomPropertiesPage/CustomPropertiesPage'))
);
const AuthenticatedAppRouter: FunctionComponent = () => { const AuthenticatedAppRouter: FunctionComponent = () => {
return ( return (
<Switch> <Switch>

12
openmetadata-ui/src/main/resources/ui/src/router/withSuspenseFallback.js Normal file
View File

@ -0,0 +1,12 @@
import React, { Suspense } from 'react';
import Loader from '../components/Loader/Loader';
export default function withSuspenseFallback(Component) {
return function DefaultFallback(props) {
return (
<Suspense fallback={<Loader />}>
<Component {...props} />
</Suspense>
);
};
}