From 37e895f175b5a7ba52ec6dda2235fb0671f673a4 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Mon, 10 Oct 2022 14:08:10 +0300 Subject: [PATCH 1/5] TCA-505 - reduce js bundle size by using lazy loading of separate tools --- src-ts/lib/route-provider/index.ts | 1 + src-ts/lib/route-provider/route.provider.tsx | 10 ++++-- src-ts/lib/route-provider/router.utils.ts | 11 +++++++ src-ts/tools/dev-center/DevCenter.tsx | 2 +- .../getting-started/GettingStartedGuide.tsx | 2 +- src-ts/tools/dev-center/dev-center.routes.tsx | 10 +++--- .../gamification-admin.routes.tsx | 11 ++++--- src-ts/tools/learn/learn.routes.tsx | 21 +++++++------ src-ts/tools/work/work.routes.tsx | 27 ++++++++-------- src/App.jsx | 31 +++++++++++-------- 10 files changed, 77 insertions(+), 49 deletions(-) create mode 100644 src-ts/lib/route-provider/router.utils.ts diff --git a/src-ts/lib/route-provider/index.ts b/src-ts/lib/route-provider/index.ts index 6674ee4cd..2a600ff0a 100644 --- a/src-ts/lib/route-provider/index.ts +++ b/src-ts/lib/route-provider/index.ts @@ -3,3 +3,4 @@ export * from './platform-route.model' export * from './route-context-data.model' export { default as routeContext } from './route.context' export * from './route.provider' +export * from './router.utils' diff --git a/src-ts/lib/route-provider/route.provider.tsx b/src-ts/lib/route-provider/route.provider.tsx index afffcd83c..9cd8a9bea 100644 --- a/src-ts/lib/route-provider/route.provider.tsx +++ b/src-ts/lib/route-provider/route.provider.tsx @@ -4,6 +4,7 @@ import { ReactElement, ReactNode, SetStateAction, + Suspense, useContext, useEffect, useState, @@ -11,6 +12,7 @@ import { import { Location, Route, useLocation } from 'react-router-dom' import { authUrlLogin } from '../functions' +import { LoadingSpinner } from '../loading-spinner' import { profileContext, ProfileContextData } from '../profile-provider' import { PlatformRoute } from './platform-route.model' @@ -154,9 +156,11 @@ export const RouteProvider: FC = (props: RouteProviderProps) ]) return ( - - {props.children} - + }> + + {props.children} + + ) } diff --git a/src-ts/lib/route-provider/router.utils.ts b/src-ts/lib/route-provider/router.utils.ts new file mode 100644 index 000000000..9fb09f0e9 --- /dev/null +++ b/src-ts/lib/route-provider/router.utils.ts @@ -0,0 +1,11 @@ +import { lazy } from 'react' +import { get } from 'lodash' + +/** + * Utility wrapper around react's `lazy` method, + * it allows importing default and named exports from modules using the same unique method + * (while react's `lazy` method only allows to import default exports) + */ +export const lazyLoad = (moduleImport: () => Promise, namedExport: string = 'default') => ( + lazy(() => moduleImport().then(m => ({default: get(m, namedExport)}))) +) diff --git a/src-ts/tools/dev-center/DevCenter.tsx b/src-ts/tools/dev-center/DevCenter.tsx index d287ef295..f8856a1c2 100644 --- a/src-ts/tools/dev-center/DevCenter.tsx +++ b/src-ts/tools/dev-center/DevCenter.tsx @@ -6,7 +6,7 @@ import { RouteContextData, } from '../../lib' -export const toolTitle: string = 'Dev Center' +import { toolTitle } from './dev-center.routes' const DevCenter: FC<{}> = () => { diff --git a/src-ts/tools/dev-center/dev-center-pages/community-app/getting-started/GettingStartedGuide.tsx b/src-ts/tools/dev-center/dev-center-pages/community-app/getting-started/GettingStartedGuide.tsx index e3c1c5b40..7044631cc 100644 --- a/src-ts/tools/dev-center/dev-center-pages/community-app/getting-started/GettingStartedGuide.tsx +++ b/src-ts/tools/dev-center/dev-center-pages/community-app/getting-started/GettingStartedGuide.tsx @@ -4,7 +4,7 @@ import { Breadcrumb, BreadcrumbItemModel, ContentLayout } from '../../../../../l import useMarkdown from '../../../dev-center-lib/hooks/useMarkdown' import MarkdownDoc from '../../../dev-center-lib/MarkdownDoc' import LayoutDocHeader from '../../../dev-center-lib/MarkdownDoc/LayoutDocHeader' -import { toolTitle } from '../../../DevCenter' +import { toolTitle } from '../../../dev-center.routes' import gettingStartedGuide from './GettingStartedGuide.md' import styles from './GettingStartedGuide.module.scss' diff --git a/src-ts/tools/dev-center/dev-center.routes.tsx b/src-ts/tools/dev-center/dev-center.routes.tsx index db049250a..ed1311360 100644 --- a/src-ts/tools/dev-center/dev-center.routes.tsx +++ b/src-ts/tools/dev-center/dev-center.routes.tsx @@ -1,8 +1,10 @@ -import { PlatformRoute } from '../../lib' +import { lazyLoad, PlatformRoute } from '../../lib' -import GettingStartedGuide from './dev-center-pages/community-app/getting-started/GettingStartedGuide' -import DevCenterLandingPage from './dev-center-pages/community-app/landing-page/DevCenterLandingPage' -import DevCenter, { toolTitle } from './DevCenter' +const GettingStartedGuide = lazyLoad(() => import('./dev-center-pages/community-app/getting-started/GettingStartedGuide')) +const DevCenterLandingPage = lazyLoad(() => import('./dev-center-pages/community-app/landing-page/DevCenterLandingPage')) +const DevCenter = lazyLoad(() => import('./DevCenter')) + +export const toolTitle: string = 'Dev Center' export const devCenterRoutes: Array = [ { diff --git a/src-ts/tools/gamification-admin/gamification-admin.routes.tsx b/src-ts/tools/gamification-admin/gamification-admin.routes.tsx index ee01f39d4..1bcc80719 100644 --- a/src-ts/tools/gamification-admin/gamification-admin.routes.tsx +++ b/src-ts/tools/gamification-admin/gamification-admin.routes.tsx @@ -1,9 +1,10 @@ -import { PlatformRoute, UserRole } from '../../lib' +import { lazyLoad, PlatformRoute, UserRole } from '../../lib' -import GamificationAdmin, { toolTitle } from './GamificationAdmin' -import BadgeDetailPage from './pages/badge-detail/BadgeDetailPage' -import BadgeListingPage from './pages/badge-listing/BadgeListingPage' -import CreateBadgePage from './pages/create-badge/CreateBadgePage' +import { toolTitle } from './GamificationAdmin' +const GamificationAdmin = lazyLoad(() => import('./GamificationAdmin')) +const BadgeDetailPage = lazyLoad(() => import('./pages/badge-detail/BadgeDetailPage')) +const BadgeListingPage = lazyLoad(() => import('./pages/badge-listing/BadgeListingPage')) +const CreateBadgePage = lazyLoad(() => import('./pages/create-badge/CreateBadgePage')) export const baseDetailPath: string = '/badge-detail' export const createBadgePath: string = '/create-badge' diff --git a/src-ts/tools/learn/learn.routes.tsx b/src-ts/tools/learn/learn.routes.tsx index c5c3548ed..d41cd749c 100644 --- a/src-ts/tools/learn/learn.routes.tsx +++ b/src-ts/tools/learn/learn.routes.tsx @@ -1,13 +1,16 @@ -import { authUrlLogin, PlatformRoute } from '../../lib' +import { authUrlLogin, lazyLoad, PlatformRoute } from '../../lib' -import { MyCertificate, UserCertificate } from './course-certificate' -import { CourseCompletedPage } from './course-completed' -import { CourseDetailsPage } from './course-details' -import { FreeCodeCamp } from './free-code-camp' -import { default as Learn, toolTitle } from './Learn' +import { toolTitle } from './Learn' import { LearnConfig } from './learn-config' -import { MyLearning } from './my-learning' -import { WelcomePage } from './welcome' + +const WelcomePage = lazyLoad(() => import('./welcome'), 'WelcomePage') +const CourseDetailsPage = lazyLoad(() => import('./course-details'), 'CourseDetailsPage') +const CourseCompletedPage = lazyLoad(() => import('./course-completed/'), 'CourseCompletedPage') +const MyCertificate = lazyLoad(() => import('./course-certificate'), 'MyCertificate') +const UserCertificate = lazyLoad(() => import('./course-certificate'), 'UserCertificate') +const FreeCodeCamp = lazyLoad(() => import('./free-code-camp'), 'FreeCodeCamp') +const MyLearning = lazyLoad(() => import('./my-learning'), 'MyLearning') +const LandingLearn = lazyLoad(() => import('./Learn')) export enum LEARN_PATHS { certificate = '/certificate', @@ -112,7 +115,7 @@ export const learnRoutes: Array = [ title: 'My Learning', }, ], - element: , + element: , memberOnly: true, route: rootRoute, title: toolTitle, diff --git a/src-ts/tools/work/work.routes.tsx b/src-ts/tools/work/work.routes.tsx index 71aa38fa7..f71eb2e10 100644 --- a/src-ts/tools/work/work.routes.tsx +++ b/src-ts/tools/work/work.routes.tsx @@ -1,20 +1,21 @@ import { Navigate } from 'react-router-dom' -import { contactSupportPath, PlatformRoute } from '../../lib' +import { contactSupportPath, lazyLoad, PlatformRoute } from '../../lib' -import { dashboardTitle, default as WorkComponent, toolTitle } from './Work' +import { dashboardTitle, toolTitle } from './Work' import { Work, WorkIntakeFormRoutes, WorkStatus } from './work-lib' import { WorkLoginPrompt } from './work-login-prompt' -import { WorkNotLoggedIn } from './work-not-logged-in' -import { - BugHuntIntakeForm, - IntakeForms, - intakeFormsTitle, - Review, -} from './work-self-service' -import SaveAfterLogin from './work-self-service/intake-forms/save-after-login/SaveAfterLogin' -import { WorkTable } from './work-table' -import { WorkThankYou } from './work-thank-you' +import { intakeFormsTitle } from './work-self-service' + +const WorkComponent = lazyLoad(() => import('./Work')) +const WorkNotLoggedIn = lazyLoad(() => import('./work-not-logged-in'), 'WorkNotLoggedIn') +const BugHuntIntakeForm = lazyLoad(() => import('./work-self-service'), 'BugHuntIntakeForm') +const IntakeForms = lazyLoad(() => import('./work-self-service'), 'IntakeForms') +const Review = lazyLoad(() => import('./work-self-service'), 'Review') + +const SaveAfterLogin = lazyLoad(() => import('./work-self-service/intake-forms/save-after-login/SaveAfterLogin')) +const WorkTable = lazyLoad(() => import('./work-table'), 'WorkTable') +const WorkThankYou = lazyLoad(() => import('./work-thank-you'), 'WorkThankYou') export const rootRoute: string = '/work' export const selfServiceRootRoute: string = '/self-service' @@ -22,7 +23,7 @@ export const selfServiceStartRoute: string = `${selfServiceRootRoute}/wizard` export const dashboardRoute: string = `${rootRoute}/dashboard` export function workDashboardRoute(active: string): string { -return `${dashboardRoute}/${active}` + return `${dashboardRoute}/${active}` } export function workDetailOrDraftRoute(selectedWork: Work): string { diff --git a/src/App.jsx b/src/App.jsx index a4af9e938..734a6a96f 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,11 +5,14 @@ import "react-responsive-modal/styles.css"; import { profileContext } from "../src-ts"; import { UNDER_MAINTENANCE } from "./constants"; -import IntakeForm from "./IntakeForm"; -import WorkItem from "./routes/WorkItems"; import { ScrollToTop } from "./ScrollToTop"; import styles from "./styles/main.module.scss"; -import UnderMaintenance from "./routes/UnderMaintenance"; +import { lazyLoad, LoadingSpinner } from "../src-ts/lib"; +import { Suspense } from "react"; + +const WorkItem = lazyLoad(() => import("./routes/WorkItems")); +const IntakeForm = lazyLoad(() => import("./IntakeForm")); +const UnderMaintenance = lazyLoad(() => import("./routes/UnderMaintenance")); const App = () => { @@ -40,16 +43,18 @@ const App = () => { return (
- - } - path="/self-service/*" - /> - } - path="/self-service/work-items/:workItemId" - /> - + }> + + } + path="/self-service/*" + /> + } + path="/self-service/work-items/:workItemId" + /> + +
); From ddb990e8f77c1ed93340d32606058ddf1023b8e1 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Mon, 10 Oct 2022 15:12:33 +0300 Subject: [PATCH 2/5] TCA-505 - lazyload utils --- src-ts/utils/contact-support/ContactSupport.tsx | 3 +-- src-ts/utils/contact-support/contact-support.routes.tsx | 6 ++++-- src-ts/utils/home/home.routes.tsx | 4 ++-- src-ts/utils/settings/settings.routes.tsx | 6 +++--- 4 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src-ts/utils/contact-support/ContactSupport.tsx b/src-ts/utils/contact-support/ContactSupport.tsx index 3cae74425..dc6dfa132 100644 --- a/src-ts/utils/contact-support/ContactSupport.tsx +++ b/src-ts/utils/contact-support/ContactSupport.tsx @@ -8,8 +8,7 @@ import { formGetInputFields, formOnReset } from '../../lib' - -export const toolTitle: string = 'Contact Support' +import { toolTitle } from './contact-support.routes' const ContactSupport: FC<{}> = () => { diff --git a/src-ts/utils/contact-support/contact-support.routes.tsx b/src-ts/utils/contact-support/contact-support.routes.tsx index 0d00d100e..ae8e0570e 100644 --- a/src-ts/utils/contact-support/contact-support.routes.tsx +++ b/src-ts/utils/contact-support/contact-support.routes.tsx @@ -1,6 +1,8 @@ -import { contactSupportPath, PlatformRoute } from '../../lib' +import { contactSupportPath, lazyLoad, PlatformRoute } from '../../lib' -import { default as ContactSupport, toolTitle } from './ContactSupport' +export const toolTitle: string = 'Contact Support' + +const ContactSupport = lazyLoad(() => import('./ContactSupport')); export const contactSupportRoutes: Array = [ { diff --git a/src-ts/utils/home/home.routes.tsx b/src-ts/utils/home/home.routes.tsx index d6a53abe6..701b29e5c 100644 --- a/src-ts/utils/home/home.routes.tsx +++ b/src-ts/utils/home/home.routes.tsx @@ -1,6 +1,6 @@ -import { PlatformRoute } from '../../lib' +import { lazyLoad, PlatformRoute } from '../../lib' -import { default as Home } from './Home' +const Home = lazyLoad(() => import('./Home')); export const homeRoute: string = '' diff --git a/src-ts/utils/settings/settings.routes.tsx b/src-ts/utils/settings/settings.routes.tsx index 77a0b292d..6af10abd4 100644 --- a/src-ts/utils/settings/settings.routes.tsx +++ b/src-ts/utils/settings/settings.routes.tsx @@ -1,8 +1,8 @@ import { ToolTitle } from '../../config' -import { PlatformRoute } from '../../lib' +import { lazyLoad, PlatformRoute } from '../../lib' -import { Account } from './account' -import Settings from './Settings' +const Account = lazyLoad(() => import('./account'), 'Account'); +const Settings = lazyLoad(() => import('./Settings')); export const settingsRoutes: Array = [ { From 8e3b334de0f791c6f4087a6b05034af345545723 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Mon, 10 Oct 2022 15:24:48 +0300 Subject: [PATCH 3/5] Add typedef for lazyLoad() --- src-ts/lib/route-provider/router.utils.ts | 11 +++++++++-- src-ts/tools/dev-center/dev-center.routes.tsx | 8 ++++---- .../gamification-admin.routes.tsx | 11 ++++++----- src-ts/tools/learn/learn.routes.tsx | 18 +++++++++--------- src-ts/tools/work/work.routes.tsx | 19 +++++++++---------- .../utils/contact-support/ContactSupport.tsx | 1 + .../contact-support.routes.tsx | 4 ++-- src-ts/utils/home/home.routes.tsx | 4 ++-- src-ts/utils/settings/settings.routes.tsx | 6 +++--- 9 files changed, 45 insertions(+), 37 deletions(-) diff --git a/src-ts/lib/route-provider/router.utils.ts b/src-ts/lib/route-provider/router.utils.ts index 9fb09f0e9..f02fc2d49 100644 --- a/src-ts/lib/route-provider/router.utils.ts +++ b/src-ts/lib/route-provider/router.utils.ts @@ -1,11 +1,18 @@ -import { lazy } from 'react' import { get } from 'lodash' +import { ComponentType, lazy, LazyExoticComponent } from 'react' + +export type LazyLoadedComponent = LazyExoticComponent> + +export type LazyLoadType = ( + moduleImport: () => Promise, + namedExport?: string +) => LazyLoadedComponent /** * Utility wrapper around react's `lazy` method, * it allows importing default and named exports from modules using the same unique method * (while react's `lazy` method only allows to import default exports) */ -export const lazyLoad = (moduleImport: () => Promise, namedExport: string = 'default') => ( +export const lazyLoad: LazyLoadType = (moduleImport: () => Promise, namedExport: string = 'default') => ( lazy(() => moduleImport().then(m => ({default: get(m, namedExport)}))) ) diff --git a/src-ts/tools/dev-center/dev-center.routes.tsx b/src-ts/tools/dev-center/dev-center.routes.tsx index ed1311360..f2e1cb5cb 100644 --- a/src-ts/tools/dev-center/dev-center.routes.tsx +++ b/src-ts/tools/dev-center/dev-center.routes.tsx @@ -1,8 +1,8 @@ -import { lazyLoad, PlatformRoute } from '../../lib' +import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib' -const GettingStartedGuide = lazyLoad(() => import('./dev-center-pages/community-app/getting-started/GettingStartedGuide')) -const DevCenterLandingPage = lazyLoad(() => import('./dev-center-pages/community-app/landing-page/DevCenterLandingPage')) -const DevCenter = lazyLoad(() => import('./DevCenter')) +const GettingStartedGuide: LazyLoadedComponent = lazyLoad(() => import('./dev-center-pages/community-app/getting-started/GettingStartedGuide')) +const DevCenterLandingPage: LazyLoadedComponent = lazyLoad(() => import('./dev-center-pages/community-app/landing-page/DevCenterLandingPage')) +const DevCenter: LazyLoadedComponent = lazyLoad(() => import('./DevCenter')) export const toolTitle: string = 'Dev Center' diff --git a/src-ts/tools/gamification-admin/gamification-admin.routes.tsx b/src-ts/tools/gamification-admin/gamification-admin.routes.tsx index 1bcc80719..f59885886 100644 --- a/src-ts/tools/gamification-admin/gamification-admin.routes.tsx +++ b/src-ts/tools/gamification-admin/gamification-admin.routes.tsx @@ -1,10 +1,11 @@ -import { lazyLoad, PlatformRoute, UserRole } from '../../lib' +import { lazyLoad, LazyLoadedComponent, PlatformRoute, UserRole } from '../../lib' import { toolTitle } from './GamificationAdmin' -const GamificationAdmin = lazyLoad(() => import('./GamificationAdmin')) -const BadgeDetailPage = lazyLoad(() => import('./pages/badge-detail/BadgeDetailPage')) -const BadgeListingPage = lazyLoad(() => import('./pages/badge-listing/BadgeListingPage')) -const CreateBadgePage = lazyLoad(() => import('./pages/create-badge/CreateBadgePage')) + +const GamificationAdmin: LazyLoadedComponent = lazyLoad(() => import('./GamificationAdmin')) +const BadgeDetailPage: LazyLoadedComponent = lazyLoad(() => import('./pages/badge-detail/BadgeDetailPage')) +const BadgeListingPage: LazyLoadedComponent = lazyLoad(() => import('./pages/badge-listing/BadgeListingPage')) +const CreateBadgePage: LazyLoadedComponent = lazyLoad(() => import('./pages/create-badge/CreateBadgePage')) export const baseDetailPath: string = '/badge-detail' export const createBadgePath: string = '/create-badge' diff --git a/src-ts/tools/learn/learn.routes.tsx b/src-ts/tools/learn/learn.routes.tsx index d41cd749c..00225d628 100644 --- a/src-ts/tools/learn/learn.routes.tsx +++ b/src-ts/tools/learn/learn.routes.tsx @@ -1,16 +1,16 @@ -import { authUrlLogin, lazyLoad, PlatformRoute } from '../../lib' +import { authUrlLogin, lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib' import { toolTitle } from './Learn' import { LearnConfig } from './learn-config' -const WelcomePage = lazyLoad(() => import('./welcome'), 'WelcomePage') -const CourseDetailsPage = lazyLoad(() => import('./course-details'), 'CourseDetailsPage') -const CourseCompletedPage = lazyLoad(() => import('./course-completed/'), 'CourseCompletedPage') -const MyCertificate = lazyLoad(() => import('./course-certificate'), 'MyCertificate') -const UserCertificate = lazyLoad(() => import('./course-certificate'), 'UserCertificate') -const FreeCodeCamp = lazyLoad(() => import('./free-code-camp'), 'FreeCodeCamp') -const MyLearning = lazyLoad(() => import('./my-learning'), 'MyLearning') -const LandingLearn = lazyLoad(() => import('./Learn')) +const WelcomePage: LazyLoadedComponent = lazyLoad(() => import('./welcome'), 'WelcomePage') +const CourseDetailsPage: LazyLoadedComponent = lazyLoad(() => import('./course-details'), 'CourseDetailsPage') +const CourseCompletedPage: LazyLoadedComponent = lazyLoad(() => import('./course-completed/'), 'CourseCompletedPage') +const MyCertificate: LazyLoadedComponent = lazyLoad(() => import('./course-certificate'), 'MyCertificate') +const UserCertificate: LazyLoadedComponent = lazyLoad(() => import('./course-certificate'), 'UserCertificate') +const FreeCodeCamp: LazyLoadedComponent = lazyLoad(() => import('./free-code-camp'), 'FreeCodeCamp') +const MyLearning: LazyLoadedComponent = lazyLoad(() => import('./my-learning'), 'MyLearning') +const LandingLearn: LazyLoadedComponent = lazyLoad(() => import('./Learn')) export enum LEARN_PATHS { certificate = '/certificate', diff --git a/src-ts/tools/work/work.routes.tsx b/src-ts/tools/work/work.routes.tsx index f71eb2e10..c95c72c00 100644 --- a/src-ts/tools/work/work.routes.tsx +++ b/src-ts/tools/work/work.routes.tsx @@ -1,21 +1,20 @@ import { Navigate } from 'react-router-dom' -import { contactSupportPath, lazyLoad, PlatformRoute } from '../../lib' +import { contactSupportPath, lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib' import { dashboardTitle, toolTitle } from './Work' import { Work, WorkIntakeFormRoutes, WorkStatus } from './work-lib' import { WorkLoginPrompt } from './work-login-prompt' import { intakeFormsTitle } from './work-self-service' -const WorkComponent = lazyLoad(() => import('./Work')) -const WorkNotLoggedIn = lazyLoad(() => import('./work-not-logged-in'), 'WorkNotLoggedIn') -const BugHuntIntakeForm = lazyLoad(() => import('./work-self-service'), 'BugHuntIntakeForm') -const IntakeForms = lazyLoad(() => import('./work-self-service'), 'IntakeForms') -const Review = lazyLoad(() => import('./work-self-service'), 'Review') - -const SaveAfterLogin = lazyLoad(() => import('./work-self-service/intake-forms/save-after-login/SaveAfterLogin')) -const WorkTable = lazyLoad(() => import('./work-table'), 'WorkTable') -const WorkThankYou = lazyLoad(() => import('./work-thank-you'), 'WorkThankYou') +const WorkComponent: LazyLoadedComponent = lazyLoad(() => import('./Work')) +const WorkNotLoggedIn: LazyLoadedComponent = lazyLoad(() => import('./work-not-logged-in'), 'WorkNotLoggedIn') +const BugHuntIntakeForm: LazyLoadedComponent = lazyLoad(() => import('./work-self-service'), 'BugHuntIntakeForm') +const IntakeForms: LazyLoadedComponent = lazyLoad(() => import('./work-self-service'), 'IntakeForms') +const Review: LazyLoadedComponent = lazyLoad(() => import('./work-self-service'), 'Review') +const SaveAfterLogin: LazyLoadedComponent = lazyLoad(() => import('./work-self-service/intake-forms/save-after-login/SaveAfterLogin')) +const WorkTable: LazyLoadedComponent = lazyLoad(() => import('./work-table'), 'WorkTable') +const WorkThankYou: LazyLoadedComponent = lazyLoad(() => import('./work-thank-you'), 'WorkThankYou') export const rootRoute: string = '/work' export const selfServiceRootRoute: string = '/self-service' diff --git a/src-ts/utils/contact-support/ContactSupport.tsx b/src-ts/utils/contact-support/ContactSupport.tsx index dc6dfa132..1cbdb5c74 100644 --- a/src-ts/utils/contact-support/ContactSupport.tsx +++ b/src-ts/utils/contact-support/ContactSupport.tsx @@ -8,6 +8,7 @@ import { formGetInputFields, formOnReset } from '../../lib' + import { toolTitle } from './contact-support.routes' const ContactSupport: FC<{}> = () => { diff --git a/src-ts/utils/contact-support/contact-support.routes.tsx b/src-ts/utils/contact-support/contact-support.routes.tsx index ae8e0570e..87e61c6b4 100644 --- a/src-ts/utils/contact-support/contact-support.routes.tsx +++ b/src-ts/utils/contact-support/contact-support.routes.tsx @@ -1,8 +1,8 @@ -import { contactSupportPath, lazyLoad, PlatformRoute } from '../../lib' +import { contactSupportPath, lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib' export const toolTitle: string = 'Contact Support' -const ContactSupport = lazyLoad(() => import('./ContactSupport')); +const ContactSupport: LazyLoadedComponent = lazyLoad(() => import('./ContactSupport')) export const contactSupportRoutes: Array = [ { diff --git a/src-ts/utils/home/home.routes.tsx b/src-ts/utils/home/home.routes.tsx index 701b29e5c..6f8da4b1a 100644 --- a/src-ts/utils/home/home.routes.tsx +++ b/src-ts/utils/home/home.routes.tsx @@ -1,6 +1,6 @@ -import { lazyLoad, PlatformRoute } from '../../lib' +import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib' -const Home = lazyLoad(() => import('./Home')); +const Home: LazyLoadedComponent = lazyLoad(() => import('./Home')) export const homeRoute: string = '' diff --git a/src-ts/utils/settings/settings.routes.tsx b/src-ts/utils/settings/settings.routes.tsx index 6af10abd4..7c158be7c 100644 --- a/src-ts/utils/settings/settings.routes.tsx +++ b/src-ts/utils/settings/settings.routes.tsx @@ -1,8 +1,8 @@ import { ToolTitle } from '../../config' -import { lazyLoad, PlatformRoute } from '../../lib' +import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '../../lib' -const Account = lazyLoad(() => import('./account'), 'Account'); -const Settings = lazyLoad(() => import('./Settings')); +const Account: LazyLoadedComponent = lazyLoad(() => import('./account'), 'Account') +const Settings: LazyLoadedComponent = lazyLoad(() => import('./Settings')) export const settingsRoutes: Array = [ { From 5ed8f6a060142a3aaf95134799c2febadfaf0f09 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Tue, 11 Oct 2022 17:07:16 +0300 Subject: [PATCH 4/5] TCA-506 - update fonts loading --- public/global.css | 4 ---- public/index.html | 7 ++++--- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/public/global.css b/public/global.css index cbe37a3b9..333d293f7 100644 --- a/public/global.css +++ b/public/global.css @@ -1,7 +1,3 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); -@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); -@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); - body { background-color: #f4f5f6; font-family: Roboto, Arial, Helvetica, sans-serif; diff --git a/public/index.html b/public/index.html index da3a59318..7df78700f 100644 --- a/public/index.html +++ b/public/index.html @@ -8,9 +8,10 @@ - - - + + + +