Skip to content

Commit edeee07

Browse files
juansanchezplastic-droidjuansanchezplastic-droid
committed
perf: decrease loading time by using dynamic imports
1 parent 1fffb87 commit edeee07

8 files changed

Lines changed: 9505 additions & 75 deletions

File tree

‎components/composite/Checkout/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { LayoutDefault } from "components/layouts/LayoutDefault"
2424
import { Accordion, AccordionItem } from "components/ui/Accordion"
2525
import { Footer } from "components/ui/Footer"
2626
import { Logo } from "components/ui/Logo"
27-
import { SpinnerLoader } from "components/ui/SpinnerLoader"
27+
import SpinnerLoader from "components/ui/SpinnerLoader"
2828

2929
interface Props {
3030
logoUrl: string
@@ -36,7 +36,7 @@ interface Props {
3636
privacyUrl: string
3737
}
3838

39-
export const Checkout: React.FC<Props> = ({
39+
const Checkout: React.FC<Props> = ({
4040
logoUrl,
4141
orderNumber,
4242
companyName,
@@ -194,3 +194,4 @@ const Sidebar = styled.div`
194194
const SummaryWrapper = styled.div`
195195
${tw`flex-1`}
196196
`
197+
export default Checkout

‎components/composite/CheckoutContainer/index.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import "twin.macro"
2+
import { CommerceLayer, OrderContainer } from "@commercelayer/react-components"
3+
import Head from "next/head"
4+
import { useTranslation } from "react-i18next"
5+
import { createGlobalStyle } from "styled-components"
6+
7+
import { AppProvider } from "components/data/AppProvider"
8+
import { GTMProvider } from "components/data/GTMProvider"
9+
import { RollbarProvider } from "components/data/RollbarProvider"
10+
11+
interface GlobalStyleProps {
12+
primary: HSLProps
13+
}
14+
15+
const GlobalCssStyle = createGlobalStyle<GlobalStyleProps>`
16+
:root {
17+
--primary-h: ${({ primary }) => primary.h};
18+
--primary-s: ${({ primary }) => primary.s};
19+
--primary-l: ${({ primary }) => primary.l};
20+
--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
21+
--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
22+
--primary-dark: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) * 0.5));
23+
--contrast-threshold: 50%;
24+
--switch: calc((var(--primary-l) - var(--contrast-threshold)) * -10000);
25+
--contrast: hsl(0, 0%, var(--switch));
26+
}
27+
`
28+
29+
interface Props {
30+
settings: CheckoutSettings
31+
}
32+
33+
const CheckoutContainer: React.FC<Props> = ({ settings, children }) => {
34+
const { t } = useTranslation()
35+
36+
return (
37+
<div>
38+
<Head>
39+
<title>{t("general.title")}</title>
40+
<link rel="icon" href={settings.favicon} />
41+
</Head>
42+
<RollbarProvider>
43+
<CommerceLayer
44+
accessToken={settings.accessToken}
45+
endpoint={settings.endpoint}
46+
>
47+
<GlobalCssStyle primary={settings.primaryColor} />
48+
<OrderContainer orderId={settings.orderId}>
49+
<AppProvider
50+
orderId={settings.orderId}
51+
accessToken={settings.accessToken}
52+
endpoint={settings.endpoint}
53+
>
54+
<GTMProvider gtmId={settings.gtmId}>{children}</GTMProvider>
55+
</AppProvider>
56+
</OrderContainer>
57+
</CommerceLayer>
58+
</RollbarProvider>
59+
</div>
60+
)
61+
}
62+
63+
export default CheckoutContainer

‎components/ui/SpinnerLoader/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styled, { css } from "styled-components"
22

3-
export const SpinnerLoader: React.FC = () => {
3+
const SpinnerLoader: React.FC = () => {
44
return (
55
<Wrapper>
66
<Spinner sizepx={100} color="gray">
@@ -80,3 +80,4 @@ const Spinner = styled.div<WrapperProps>`
8080
}
8181
}
8282
`
83+
export default SpinnerLoader

‎next.config.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@ module.exports = {
1313
'node_modules',
1414
'axios',
1515
)
16-
config.resolve.alias['@commercelayer/js-sdk'] = path.resolve(
16+
config.resolve.alias['strip-ansi'] = path.resolve(
1717
__dirname,
1818
'node_modules',
19-
'@commercelayer/js-sdk',
20-
)
21-
config.resolve.alias['@babel/runtime'] = path.resolve(
22-
__dirname,
23-
'node_modules',
24-
'@babel/runtime',
25-
)
19+
'next/dist/compiled/strip-ansi',
20+
)
21+
config.resolve.alias['@babel/runtime'] = path.resolve(
22+
__dirname,
23+
'node_modules',
24+
'@babel/runtime',
25+
)
2626
return config
2727
},
2828
}

0 commit comments

Comments
 (0)
⚡