diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx index 6264a7a70a..f455043452 100644 --- a/frontend/src/component/App.tsx +++ b/frontend/src/component/App.tsx @@ -10,7 +10,7 @@ import NotFound from 'component/common/NotFound/NotFound'; import { ProtectedRoute } from 'component/common/ProtectedRoute/ProtectedRoute'; import { SWRProvider } from 'component/providers/SWRProvider/SWRProvider'; import { PlausibleProvider } from 'component/providers/PlausibleProvider/PlausibleProvider'; -import { routes } from 'component/menu/routes'; +import { preload, routes } from 'component/menu/routes'; import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails'; import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser'; import { SplashPageRedirect } from 'component/splash/SplashPageRedirect/SplashPageRedirect'; @@ -49,6 +49,14 @@ export const App = () => { } }, [authDetails, user]); + useEffect(() => { + const timeout = setTimeout(() => { + preload(); + }, 3_000); + + return () => clearTimeout(timeout); + }); + return ( diff --git a/frontend/src/component/admin/LazyAdmin.tsx b/frontend/src/component/admin/LazyAdmin.tsx deleted file mode 100644 index c7776620c5..0000000000 --- a/frontend/src/component/admin/LazyAdmin.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { lazy } from 'react'; - -export const LazyAdmin = lazy(() => import('./LazyAdminExport')); diff --git a/frontend/src/component/admin/LazyAdminExport.tsx b/frontend/src/component/admin/LazyAdminExport.tsx deleted file mode 100644 index e2e2d27958..0000000000 --- a/frontend/src/component/admin/LazyAdminExport.tsx +++ /dev/null @@ -1,7 +0,0 @@ -// Lazy loading only supports default export. We have an ADR -// that says we should only use named exports, because -// it makes it harder to diverge from the name of the component when -// importing it in other files. -import { Admin } from './Admin'; - -export default Admin; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx index cf2cbaf591..0430d0884e 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx @@ -1,8 +1,13 @@ -import React, { forwardRef, Fragment, useImperativeHandle } from 'react'; +import React, { + forwardRef, + Fragment, + lazy, + Suspense, + useImperativeHandle, +} from 'react'; import { Button, styled, Tooltip } from '@mui/material'; import { HelpOutline } from '@mui/icons-material'; import { IConstraint } from 'interfaces/strategy'; -import { ConstraintAccordion } from 'component/common/ConstraintAccordion/ConstraintAccordion'; import produce from 'immer'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; import { useWeakMap } from 'hooks/useWeakMap'; @@ -32,6 +37,12 @@ interface IConstraintAccordionListItemState { editing?: boolean; } +const ConstraintAccordion = lazy(() => + import('component/common/ConstraintAccordion/ConstraintAccordion').then( + ({ ConstraintAccordion }) => ({ default: ConstraintAccordion }) + ) +); + export const constraintAccordionListId = 'constraintAccordionListId'; const StyledContainer = styled('div')({ @@ -153,15 +164,21 @@ export const ConstraintAccordionList = forwardRef< condition={index > 0} show={} /> - + + + ))} { +export const ContextList: VFC = () => { const [showDelDialogue, setShowDelDialogue] = useState(false); const [name, setName] = useState(); const { context, refetchUnleashContext, loading } = useUnleashContext(); @@ -227,5 +227,3 @@ const ContextList: VFC = () => { ); }; - -export default ContextList; diff --git a/frontend/src/component/demo/Demo.tsx b/frontend/src/component/demo/Demo.tsx index a16cb6247f..cdbc619570 100644 --- a/frontend/src/component/demo/Demo.tsx +++ b/frontend/src/component/demo/Demo.tsx @@ -6,7 +6,6 @@ import { TOPICS } from './demo-topics'; import { DemoDialogWelcome } from './DemoDialog/DemoDialogWelcome/DemoDialogWelcome'; import { DemoDialogFinish } from './DemoDialog/DemoDialogFinish/DemoDialogFinish'; import { DemoDialogPlans } from './DemoDialog/DemoDialogPlans/DemoDialogPlans'; -import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { DemoBanner } from './DemoBanner/DemoBanner'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { useMediaQuery } from '@mui/material'; @@ -26,7 +25,6 @@ interface IDemoProps { } export const Demo = ({ children }: IDemoProps): JSX.Element => { - const { uiConfig } = useUiConfig(); const isSmallScreen = useMediaQuery(theme.breakpoints.down(768)); const { trackEvent } = usePlausibleTracker(); @@ -80,8 +78,6 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => { setStep(0); }; - if (!uiConfig.flags.demo) return children; - return ( <> import('./Demo').then(module => ({ @@ -6,10 +8,16 @@ const LazyDemoComponent = lazy(() => })) ); -export const LazyDemo: FC = ({ children }) => ( - {children}}> - - <>{children} - - -); +export const LazyDemo: FC = ({ children }) => { + const { uiConfig } = useUiConfig(); + + if (!uiConfig.flags.demo) return <>{children}; + + return ( + }> + + <>{children} + + + ); +}; diff --git a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx index db775f2b5f..075674626e 100644 --- a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx +++ b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx @@ -18,7 +18,7 @@ import { formatUnknownError } from 'utils/formatUnknownError'; import { GO_BACK } from 'constants/navigate'; import { ENV_LIMIT } from 'constants/values'; -const CreateEnvironment = () => { +export const CreateEnvironment = () => { const { setToastApiError, setToastData } = useToast(); const { uiConfig } = useUiConfig(); const navigate = useNavigate(); @@ -134,5 +134,3 @@ const CreateEnvironment = () => { /> ); }; - -export default CreateEnvironment; diff --git a/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx b/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx index e38872ca2c..8fd9d45987 100644 --- a/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx +++ b/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx @@ -13,7 +13,7 @@ import { formatUnknownError } from 'utils/formatUnknownError'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { GO_BACK } from 'constants/navigate'; -const EditEnvironment = () => { +export const EditEnvironment = () => { const { uiConfig } = useUiConfig(); const { setToastData, setToastApiError } = useToast(); const id = useRequiredPathParam('id'); @@ -93,5 +93,3 @@ const EditEnvironment = () => { ); }; - -export default EditEnvironment; diff --git a/frontend/src/component/feature/CreateFeature/CreateFeature.tsx b/frontend/src/component/feature/CreateFeature/CreateFeature.tsx index 4303092e6b..8cf385d5d8 100644 --- a/frontend/src/component/feature/CreateFeature/CreateFeature.tsx +++ b/frontend/src/component/feature/CreateFeature/CreateFeature.tsx @@ -13,7 +13,7 @@ import { CF_CREATE_BTN_ID } from 'utils/testIds'; import { formatUnknownError } from 'utils/formatUnknownError'; import { GO_BACK } from 'constants/navigate'; -const CreateFeature = () => { +export const CreateFeature = () => { const { setToastData, setToastApiError } = useToast(); const { setShowFeedback } = useContext(UIContext); const { uiConfig } = useUiConfig(); @@ -112,5 +112,3 @@ const CreateFeature = () => { ); }; - -export default CreateFeature; diff --git a/frontend/src/component/feature/EditFeature/EditFeature.tsx b/frontend/src/component/feature/EditFeature/EditFeature.tsx index f4d2cfb6a8..06f93eb787 100644 --- a/frontend/src/component/feature/EditFeature/EditFeature.tsx +++ b/frontend/src/component/feature/EditFeature/EditFeature.tsx @@ -13,7 +13,7 @@ import { formatUnknownError } from 'utils/formatUnknownError'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { GO_BACK } from 'constants/navigate'; -const EditFeature = () => { +export const EditFeature = () => { const projectId = useRequiredPathParam('projectId'); const featureId = useRequiredPathParam('featureId'); const { setToastData, setToastApiError } = useToast(); @@ -110,5 +110,3 @@ const EditFeature = () => { ); }; - -export default EditFeature; diff --git a/frontend/src/component/feature/FeatureView/LazyFeatureView.tsx b/frontend/src/component/feature/FeatureView/LazyFeatureView.tsx deleted file mode 100644 index 52fcba51e6..0000000000 --- a/frontend/src/component/feature/FeatureView/LazyFeatureView.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { lazy } from 'react'; - -export const LazyFeatureView = lazy(() => import('./FeatureViewLazyExport')); diff --git a/frontend/src/component/menu/routes.ts b/frontend/src/component/menu/routes.ts index 5e47c87364..f87f070417 100644 --- a/frontend/src/component/menu/routes.ts +++ b/frontend/src/component/menu/routes.ts @@ -1,175 +1,264 @@ -import { lazy } from 'react'; +import { ComponentType, LazyExoticComponent, lazy } from 'react'; import { EEA, P, RE, SE, UG } from 'component/common/flags'; import Login from 'component/user/Login/Login'; import { INavigationMenuItem, IRoute } from 'interfaces/route'; import { SplashPage } from 'component/splash/SplashPage/SplashPage'; -import { LazyPlayground } from 'component/playground/Playground/LazyPlayground'; -import { LazyCreateProject } from 'component/project/Project/CreateProject/LazyCreateProject'; -import { LazyFeatureView } from 'component/feature/FeatureView/LazyFeatureView'; -import { LazyAdmin } from 'component/admin/LazyAdmin'; -import { LazyProject } from 'component/project/Project/LazyProject'; +import { AdminRedirect } from 'component/admin/AdminRedirect'; +import RedirectFeatureView from 'component/feature/RedirectFeatureView/RedirectFeatureView'; +import RedirectArchive from 'component/archive/RedirectArchive'; -const ResetPassword = lazy( +function lazyWithPreload>( + factory: () => Promise<{ default: T }> +) { + const Component: LazyExoticComponent & { preload?: () => void } = + lazy(factory); + Component.preload = factory; + return Component; +} + +const ForgottenPassword = lazyWithPreload(() => + import('component/user/ForgottenPassword/ForgottenPassword').then( + module => ({ default: module.ForgottenPassword }) + ) +); +const CreateEnvironment = lazyWithPreload(() => + import('component/environments/CreateEnvironment/CreateEnvironment').then( + module => ({ default: module.CreateEnvironment }) + ) +); +const EditEnvironment = lazyWithPreload(() => + import('component/environments/EditEnvironment/EditEnvironment').then( + module => ({ default: module.EditEnvironment }) + ) +); +const EditTagType = lazyWithPreload(() => + import('component/tags/EditTagType/EditTagType').then(module => ({ + default: module.EditTagType, + })) +); +const CreateTagType = lazyWithPreload(() => + import('component/tags/CreateTagType/CreateTagType').then(module => ({ + default: module.CreateTagType, + })) +); +const EditProject = lazyWithPreload(() => + import('component/project/Project/EditProject/EditProject').then( + module => ({ default: module.EditProject }) + ) +); +const CreateFeature = lazyWithPreload(() => + import('component/feature/CreateFeature/CreateFeature').then(module => ({ + default: module.CreateFeature, + })) +); +const EditFeature = lazyWithPreload(() => + import('component/feature/EditFeature/EditFeature').then(module => ({ + default: module.EditFeature, + })) +); +const ContextList = lazyWithPreload(() => + import('component/context/ContextList/ContextList').then(module => ({ + default: module.ContextList, + })) +); +const Playground = lazyWithPreload(() => + import('component/playground/Playground/Playground').then(module => ({ + default: module.Playground, + })) +); +const FeatureView = lazyWithPreload(() => + import('component/feature/FeatureView/FeatureView').then(module => ({ + default: module.FeatureView, + })) +); +const ResetPassword = lazyWithPreload( () => import('component/user/ResetPassword/ResetPassword') ); -const FeatureToggleListTable = lazy(() => +const FeatureToggleListTable = lazyWithPreload(() => import('component/feature/FeatureToggleList/FeatureToggleListTable').then( module => ({ default: module.FeatureToggleListTable }) ) ); -const ForgottenPassword = lazy( - () => import('component/user/ForgottenPassword/ForgottenPassword') -); -const RedirectArchive = lazy(() => import('component/archive/RedirectArchive')); -const CreateEnvironment = lazy( - () => import('component/environments/CreateEnvironment/CreateEnvironment') -); -const EditEnvironment = lazy( - () => import('component/environments/EditEnvironment/EditEnvironment') -); -const EditTagType = lazy( - () => import('component/tags/EditTagType/EditTagType') -); -const CreateTagType = lazy( - () => import('component/tags/CreateTagType/CreateTagType') -); -const EditProject = lazy( - () => import('component/project/Project/EditProject/EditProject') -); -const CreateFeature = lazy( - () => import('component/feature/CreateFeature/CreateFeature') -); -const EditFeature = lazy( - () => import('component/feature/EditFeature/EditFeature') -); -const ContextList = lazy( - () => import('component/context/ContextList/ContextList') -); -const RedirectFeatureView = lazy( - () => import('component/feature/RedirectFeatureView/RedirectFeatureView') -); -const StrategyView = lazy(() => +const StrategyView = lazyWithPreload(() => import('component/strategies/StrategyView/StrategyView').then(module => ({ default: module.StrategyView, })) ); -const StrategiesList = lazy(() => +const StrategiesList = lazyWithPreload(() => import('component/strategies/StrategiesList/StrategiesList').then( - module => ({ default: module.StrategiesList }) + module => ({ default: module.StrategiesList, preload: true }) ) ); -const TagTypeList = lazy(() => +const TagTypeList = lazyWithPreload(() => import('component/tags/TagTypeList/TagTypeList').then(module => ({ default: module.TagTypeList, })) ); -const AddonList = lazy(() => +const AddonList = lazyWithPreload(() => import('component/addons/AddonList/AddonList').then(module => ({ default: module.AddonList, })) ); -const NewUser = lazy(() => +const NewUser = lazyWithPreload(() => import('component/user/NewUser/NewUser').then(module => ({ default: module.NewUser, })) ); -const ProjectListNew = lazy(() => +const ProjectList = lazyWithPreload(() => import('component/project/ProjectList/ProjectList').then(module => ({ - default: module.ProjectListNew, + default: module.ProjectList, })) ); -const EditContext = lazy(() => +const EditContext = lazyWithPreload(() => import('component/context/EditContext/EditContext').then(module => ({ default: module.EditContext, })) ); -const ApplicationEdit = lazy(() => +const ApplicationEdit = lazyWithPreload(() => import('component/application/ApplicationEdit/ApplicationEdit').then( module => ({ default: module.ApplicationEdit }) ) ); -const ApplicationList = lazy(() => +const ApplicationList = lazyWithPreload(() => import('component/application/ApplicationList/ApplicationList').then( module => ({ default: module.ApplicationList }) ) ); -const CreateAddon = lazy(() => +const CreateAddon = lazyWithPreload(() => import('component/addons/CreateAddon/CreateAddon').then(module => ({ default: module.CreateAddon, })) ); -const EditAddon = lazy(() => +const EditAddon = lazyWithPreload(() => import('component/addons/EditAddon/EditAddon').then(module => ({ default: module.EditAddon, })) ); -const CopyFeatureToggle = lazy(() => +const CopyFeatureToggle = lazyWithPreload(() => import('component/feature/CopyFeature/CopyFeature').then(module => ({ default: module.CopyFeatureToggle, })) ); -const EventPage = lazy(() => +const EventPage = lazyWithPreload(() => import('component/events/EventPage/EventPage').then(module => ({ default: module.EventPage, })) ); -const CreateStrategy = lazy(() => +const CreateStrategy = lazyWithPreload(() => import('component/strategies/CreateStrategy/CreateStrategy').then( module => ({ default: module.CreateStrategy }) ) ); -const EditStrategy = lazy(() => +const EditStrategy = lazyWithPreload(() => import('component/strategies/EditStrategy/EditStrategy').then(module => ({ default: module.EditStrategy, })) ); -const CreateUnleashContextPage = lazy(() => +const CreateUnleashContextPage = lazyWithPreload(() => import( 'component/context/CreateUnleashContext/CreateUnleashContextPage' ).then(module => ({ default: module.CreateUnleashContextPage })) ); -const CreateSegment = lazy(() => +const CreateSegment = lazyWithPreload(() => import('component/segments/CreateSegment/CreateSegment').then(module => ({ default: module.CreateSegment, })) ); -const EditSegment = lazy(() => +const EditSegment = lazyWithPreload(() => import('component/segments/EditSegment/EditSegment').then(module => ({ default: module.EditSegment, })) ); -const EnvironmentTable = lazy(() => +const EnvironmentTable = lazyWithPreload(() => import('component/environments/EnvironmentTable/EnvironmentTable').then( module => ({ default: module.EnvironmentTable }) ) ); -const SegmentTable = lazy(() => +const SegmentTable = lazyWithPreload(() => import('../segments/SegmentTable/SegmentTable').then(module => ({ default: module.SegmentTable, })) ); -const FeaturesArchiveTable = lazy(() => +const FeaturesArchiveTable = lazyWithPreload(() => import('../archive/FeaturesArchiveTable').then(module => ({ default: module.FeaturesArchiveTable, })) ); -const Profile = lazy(() => +const Profile = lazyWithPreload(() => import('component/user/Profile/Profile').then(module => ({ default: module.Profile, })) ); - -const AdminRedirect = lazy(() => - import('component/admin/AdminRedirect').then(module => ({ - default: module.AdminRedirect, - })) -); - -const LoginHistory = lazy(() => +const LoginHistory = lazyWithPreload(() => import('component/loginHistory/LoginHistory').then(module => ({ default: module.LoginHistory, + preload: true, })) ); +const CreateProject = lazyWithPreload(() => + import('component/project/Project/CreateProject/CreateProject').then( + module => ({ default: module.CreateProject }) + ) +); +const LazyAdmin = lazyWithPreload(() => + import('component/admin/Admin').then(module => ({ + default: module.Admin, + })) +); +const Project = lazyWithPreload(() => + import('component/project/Project/Project').then(module => ({ + default: module.Project, + })) +); + +export const preload = () => { + const components = [ + ForgottenPassword, + CreateEnvironment, + EditEnvironment, + EditTagType, + CreateTagType, + EditProject, + CreateFeature, + EditFeature, + ContextList, + Playground, + FeatureView, + ResetPassword, + FeatureToggleListTable, + StrategyView, + StrategiesList, + TagTypeList, + AddonList, + NewUser, + ProjectList, + EditContext, + ApplicationEdit, + ApplicationList, + CreateAddon, + EditAddon, + CopyFeatureToggle, + EventPage, + CreateStrategy, + EditStrategy, + CreateUnleashContextPage, + CreateSegment, + EditSegment, + EnvironmentTable, + SegmentTable, + FeaturesArchiveTable, + Profile, + LoginHistory, + CreateProject, + LazyAdmin, + Project, + ]; + components.forEach(component => { + if (component.preload) { + component.preload(); + } + }); +}; export const routes: IRoute[] = [ // Splash @@ -187,7 +276,7 @@ export const routes: IRoute[] = [ path: '/projects/create', parent: '/projects', title: 'Create', - component: LazyCreateProject, + component: CreateProject, type: 'protected', enterprise: true, menu: {}, @@ -229,7 +318,7 @@ export const routes: IRoute[] = [ path: '/projects/:projectId/features/:featureId/*', parent: '/projects', title: 'FeatureView', - component: LazyFeatureView, + component: FeatureView, type: 'protected', menu: {}, }, @@ -253,7 +342,7 @@ export const routes: IRoute[] = [ path: '/projects/:projectId/*', parent: '/projects', title: ':projectId', - component: LazyProject, + component: Project, flag: P, type: 'protected', menu: {}, @@ -261,7 +350,7 @@ export const routes: IRoute[] = [ { path: '/projects', title: 'Projects', - component: ProjectListNew, + component: ProjectList, type: 'protected', menu: { mobile: true }, }, @@ -287,7 +376,7 @@ export const routes: IRoute[] = [ { path: '/playground', title: 'Playground', - component: LazyPlayground, + component: Playground, hidden: false, type: 'protected', menu: { mobile: true }, diff --git a/frontend/src/component/playground/Playground/LazyPlayground.tsx b/frontend/src/component/playground/Playground/LazyPlayground.tsx deleted file mode 100644 index 41ea00f4b3..0000000000 --- a/frontend/src/component/playground/Playground/LazyPlayground.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { lazy } from 'react'; - -export const LazyPlayground = lazy(() => import('./Playground')); diff --git a/frontend/src/component/playground/Playground/Playground.tsx b/frontend/src/component/playground/Playground/Playground.tsx index 99bb1483f8..0556fb0d01 100644 --- a/frontend/src/component/playground/Playground/Playground.tsx +++ b/frontend/src/component/playground/Playground/Playground.tsx @@ -219,5 +219,3 @@ export const Playground: VFC<{}> = () => { ); }; - -export default Playground; diff --git a/frontend/src/component/project/Project/CreateProject/CreateProject.tsx b/frontend/src/component/project/Project/CreateProject/CreateProject.tsx index af8f2d92fb..088adfe5b1 100644 --- a/frontend/src/component/project/Project/CreateProject/CreateProject.tsx +++ b/frontend/src/component/project/Project/CreateProject/CreateProject.tsx @@ -16,7 +16,7 @@ import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; const CREATE_PROJECT_BTN = 'CREATE_PROJECT_BTN'; -const CreateProject = () => { +export const CreateProject = () => { const { setToastData, setToastApiError } = useToast(); const { refetchUser } = useAuthUser(); const { uiConfig } = useUiConfig(); @@ -119,5 +119,3 @@ const CreateProject = () => { ); }; - -export default CreateProject; diff --git a/frontend/src/component/project/Project/CreateProject/LazyCreateProject.tsx b/frontend/src/component/project/Project/CreateProject/LazyCreateProject.tsx deleted file mode 100644 index 9bbfa07635..0000000000 --- a/frontend/src/component/project/Project/CreateProject/LazyCreateProject.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { lazy } from 'react'; - -export const LazyCreateProject = lazy(() => import('./CreateProject')); diff --git a/frontend/src/component/project/Project/EditProject/EditProject.tsx b/frontend/src/component/project/Project/EditProject/EditProject.tsx index 6540eb27c8..37fb372c9b 100644 --- a/frontend/src/component/project/Project/EditProject/EditProject.tsx +++ b/frontend/src/component/project/Project/EditProject/EditProject.tsx @@ -21,7 +21,7 @@ import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; const EDIT_PROJECT_BTN = 'EDIT_PROJECT_BTN'; -const EditProject = () => { +export const EditProject = () => { const { uiConfig } = useUiConfig(); const { setToastData, setToastApiError } = useToast(); const { hasAccess } = useContext(AccessContext); @@ -138,5 +138,3 @@ const EditProject = () => { ); }; - -export default EditProject; diff --git a/frontend/src/component/project/Project/LazyProject.tsx b/frontend/src/component/project/Project/LazyProject.tsx deleted file mode 100644 index b18a87454b..0000000000 --- a/frontend/src/component/project/Project/LazyProject.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { lazy } from 'react'; - -export const LazyProject = lazy(() => import('./LazyProjectExport')); diff --git a/frontend/src/component/project/Project/LazyProjectExport.tsx b/frontend/src/component/project/Project/LazyProjectExport.tsx deleted file mode 100644 index e10797d06b..0000000000 --- a/frontend/src/component/project/Project/LazyProjectExport.tsx +++ /dev/null @@ -1,7 +0,0 @@ -// Lazy loading only supports default export. We have an ADR -// that says we should only use named exports, because -// it makes it harder to diverge from the name of the component when -// importing it in other files. -import { Project } from './Project'; - -export default Project; diff --git a/frontend/src/component/project/ProjectList/ProjectList.tsx b/frontend/src/component/project/ProjectList/ProjectList.tsx index 335aba8c54..2e7dac2b9b 100644 --- a/frontend/src/component/project/ProjectList/ProjectList.tsx +++ b/frontend/src/component/project/ProjectList/ProjectList.tsx @@ -99,7 +99,7 @@ function resolveCreateButtonData( } } -export const ProjectListNew = () => { +export const ProjectList = () => { const { hasAccess } = useContext(AccessContext); const navigate = useNavigate(); const { projects, loading, error, refetch } = useProjects(); diff --git a/frontend/src/component/tags/CreateTagType/CreateTagType.tsx b/frontend/src/component/tags/CreateTagType/CreateTagType.tsx index c6c52bac10..1c36d9f8a5 100644 --- a/frontend/src/component/tags/CreateTagType/CreateTagType.tsx +++ b/frontend/src/component/tags/CreateTagType/CreateTagType.tsx @@ -10,7 +10,7 @@ import useToast from 'hooks/useToast'; import { formatUnknownError } from 'utils/formatUnknownError'; import { GO_BACK } from 'constants/navigate'; -const CreateTagType = () => { +export const CreateTagType = () => { const { setToastData, setToastApiError } = useToast(); const { uiConfig } = useUiConfig(); const navigate = useNavigate(); diff --git a/frontend/src/component/tags/EditTagType/EditTagType.tsx b/frontend/src/component/tags/EditTagType/EditTagType.tsx index 5e9a0e841e..bf54307fd0 100644 --- a/frontend/src/component/tags/EditTagType/EditTagType.tsx +++ b/frontend/src/component/tags/EditTagType/EditTagType.tsx @@ -12,7 +12,7 @@ import { formatUnknownError } from 'utils/formatUnknownError'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { GO_BACK } from 'constants/navigate'; -const EditTagType = () => { +export const EditTagType = () => { const { setToastData, setToastApiError } = useToast(); const { uiConfig } = useUiConfig(); const navigate = useNavigate(); @@ -83,5 +83,3 @@ const EditTagType = () => { ); }; - -export default EditTagType; diff --git a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx index 331a923000..0095e08249 100644 --- a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx +++ b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx @@ -48,7 +48,7 @@ const StyledTypography = styled(Typography)(({ theme }) => ({ ...textCenter, })); -const ForgottenPassword = () => { +export const ForgottenPassword = () => { const [email, setEmail] = useState(''); const [attempted, setAttempted] = useState(false); const [loading, setLoading] = useState(false); @@ -141,5 +141,3 @@ const ForgottenPassword = () => { ); }; - -export default ForgottenPassword;