magento · dpatil-magento · Feb 24, 2021 · Feb 2, 2021 · Feb 3, 2021 · Feb 4, 2021
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -33,7 +33,6 @@ services:
       - ./packages/venia-concept/static:/usr/src/app/packages/venia-concept/static:rw
       - ./packages/venia-ui/.storybook:/usr/src/app/packages/venia-ui/.storybook:rw
       - ./packages/venia-ui/lib:/usr/src/app/packages/venia-ui/lib:rw
-      - ./packages/venia-ui/templates:/usr/src/app/packages/venia-ui/templates:rw
     environment:
       # environment variables consumed by the nginx-proxy service
       VIRTUAL_HOST: ${DEV_SERVER_HOST}

diff --git a/packages/venia-concept/template.html b/packages/venia-concept/template.html
@@ -24,7 +24,22 @@
         <link rel="apple-touch-icon" href="/venia-static/icons/venia_square_57.png">
         <link rel="apple-touch-icon" sizes="180x180" href="/venia-static/icons/apple-touch-icon.png">
         <link rel="preconnect" href="<%= process.env.MAGENTO_BACKEND_URL %>">
+        <!--
+            This following CSS is a copy of the css returned by Google's font API that
+            allows us to "skip" a network round trip.
+
+            CSS requests are _render_ blocking, while font requests are only _text_
+            blocking. By removing the link request we only wait for font request, to
+            shave off a few ms :)
 
+            The CSS below this comment is the response copied wholesale from Google's font
+            API. If you ever need to update it, get the response and replace what is below
+            this comment. Remember to replace the preload link above with the src URL!
+
+            Example API responses:
+            https://fonts.googleapis.com/css?family=Muli:400&display=swap
+            https://fonts.googleapis.com/css?family=Source+Serif+Pro:600&display=swap
+        -->
         <style type="text/css">
             /* vietnamese */
             @font-face {
@@ -128,7 +143,7 @@
         </style>
     </head>
     <body>
-        <div id="root" />
+        <div id="root"></div>
 
         <!-- Fallback for when JavaScript is disabled. -->
         <noscript>

diff --git a/packages/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js b/packages/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, Suspense } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from '@magento/venia-drivers';
 import { useAccountInformationPage } from '@magento/peregrine/lib/talons/AccountInformationPage/useAccountInformationPage';
@@ -8,10 +8,12 @@ import Button from '../Button';
 import { Message } from '../Field';
 import { Title } from '../Head';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
-import EditModal from './editModal';
+
 import defaultClasses from './accountInformationPage.css';
 import AccountInformationPageOperations from './accountInformationPage.gql.js';
 
+const EditModal = React.lazy(() => import('./editModal'));
+
 const AccountInformationPage = props => {
     const classes = mergeClasses(defaultClasses, props.classes);
 
@@ -103,16 +105,18 @@ const AccountInformationPage = props => {
                         </Button>
                     </div>
                 </div>
-                <EditModal
-                    formErrors={formErrors}
-                    initialValues={customer}
-                    isDisabled={isDisabled}
-                    isOpen={isUpdateMode}
-                    onCancel={handleCancel}
-                    onChangePassword={handleChangePassword}
-                    onSubmit={handleSubmit}
-                    shouldShowNewPassword={shouldShowNewPassword}
-                />
+                <Suspense fallback={null}>
+                    <EditModal
+                        formErrors={formErrors}
+                        initialValues={customer}
+                        isDisabled={isDisabled}
+                        isOpen={isUpdateMode}
+                        onCancel={handleCancel}
+                        onChangePassword={handleChangePassword}
+                        onSubmit={handleSubmit}
+                        shouldShowNewPassword={shouldShowNewPassword}
+                    />
+                </Suspense>
             </Fragment>
         );
     }

diff --git a/packages/venia-ui/lib/components/App/app.js b/packages/venia-ui/lib/components/App/app.js
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, Suspense } from 'react';
 import { useIntl } from 'react-intl';
 import { array, func, shape, string } from 'prop-types';
 
@@ -9,7 +9,6 @@ import globalCSS from '../../index.css';
 import { HeadProvider, Title } from '../Head';
 import Main from '../Main';
 import Mask from '../Mask';
-import Navigation from '../Navigation';
 import Routes from '../Routes';
 import ToastContainer from '../ToastContainer';
 import Icon from '../Icon';
@@ -20,6 +19,8 @@ import {
     Wifi as WifiIcon
 } from 'react-feather';
 
+const Navigation = React.lazy(() => import('../Navigation'));
+
 const OnlineIcon = <Icon src={WifiIcon} attrs={{ width: 18 }} />;
 const OfflineIcon = <Icon src={CloudOffIcon} attrs={{ width: 18 }} />;
 const ErrorIcon = <Icon src={AlertCircleIcon} attrs={{ width: 18 }} />;
@@ -117,7 +118,9 @@ const App = props => {
                 <Routes />
             </Main>
             <Mask isActive={hasOverlay} dismiss={handleCloseDrawer} />
-            <Navigation />
+            <Suspense fallback={null}>
+                <Navigation />
+            </Suspense>
             <ToastContainer />
         </HeadProvider>
     );

diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/giftCardSection.ee.js b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/giftCardSection.ee.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { useIntl } from 'react-intl';
 
 import { Section } from '../../Accordion';
-import GiftCards from '../GiftCards';
+
+const GiftCards = React.lazy(() => import('../GiftCards'));
 
 const GiftCardSection = props => {
     const { setIsCartUpdating } = props;
@@ -15,7 +16,9 @@ const GiftCardSection = props => {
                 defaultMessage: 'Apply Gift Card'
             })}
         >
-            <GiftCards setIsCartUpdating={setIsCartUpdating} />
+            <Suspense fallback={null}>
+                <GiftCards setIsCartUpdating={setIsCartUpdating} />
+            </Suspense>
         </Section>
     );
 };

diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js
@@ -1,16 +1,17 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { useIntl } from 'react-intl';
 import { func } from 'prop-types';
 
 import { mergeClasses } from '../../../classify';
 import { Accordion, Section } from '../../Accordion';
-import CouponCode from './CouponCode';
 import GiftCardSection from './giftCardSection';
-import GiftOptions from './GiftOptions';
-import ShippingMethods from './ShippingMethods';
 
 import defaultClasses from './priceAdjustments.css';
 
+const CouponCode = React.lazy(() => import('./CouponCode'));
+const GiftOptions = React.lazy(() => import('./GiftOptions'));
+const ShippingMethods = React.lazy(() => import('./ShippingMethods'));
+
 /**
  * PriceAdjustments is a child component of the CartPage component.
  * It renders the price adjustments forms for applying gift cards, coupons, and the shipping method.
@@ -43,7 +44,11 @@ const PriceAdjustments = props => {
                         defaultMessage: 'Estimate your Shipping'
                     })}
                 >
-                    <ShippingMethods setIsCartUpdating={setIsCartUpdating} />
+                    <Suspense fallback={null}>
+                        <ShippingMethods
+                            setIsCartUpdating={setIsCartUpdating}
+                        />
+                    </Suspense>
                 </Section>
                 <Section
                     id={'coupon_code'}
@@ -52,7 +57,9 @@ const PriceAdjustments = props => {
                         defaultMessage: 'Enter Coupon Code'
                     })}
                 >
-                    <CouponCode setIsCartUpdating={setIsCartUpdating} />
+                    <Suspense fallback={null}>
+                        <CouponCode setIsCartUpdating={setIsCartUpdating} />
+                    </Suspense>
                 </Section>
                 <GiftCardSection setIsCartUpdating={setIsCartUpdating} />
                 <Section
@@ -62,7 +69,9 @@ const PriceAdjustments = props => {
                         defaultMessage: 'See Gift Options'
                     })}
                 >
-                    <GiftOptions />
+                    <Suspense fallback={null}>
+                        <GiftOptions />
+                    </Suspense>
                 </Section>
             </Accordion>
         </div>

diff --git a/packages/venia-ui/lib/components/CartPage/ProductListing/productListing.js b/packages/venia-ui/lib/components/CartPage/ProductListing/productListing.js
@@ -1,15 +1,15 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, Suspense } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { gql } from '@apollo/client';
 import { useProductListing } from '@magento/peregrine/lib/talons/CartPage/ProductListing/useProductListing';
 
 import { mergeClasses } from '../../../classify';
 import LoadingIndicator from '../../LoadingIndicator';
-import EditModal from './EditModal';
 import defaultClasses from './productListing.css';
 import Product from './product';
 import { ProductListingFragment } from './productListingFragments';
 
+const EditModal = React.lazy(() => import('./EditModal'));
 /**
  * A child component of the CartPage component.
  * This component renders the product listing on the cart page.
@@ -60,11 +60,13 @@ const ProductListing = props => {
         return (
             <Fragment>
                 <ul className={classes.root}>{productComponents}</ul>
-                <EditModal
-                    item={activeEditItem}
-                    setIsCartUpdating={setIsCartUpdating}
-                    setActiveEditItem={setActiveEditItem}
-                />
+                <Suspense fallback={null}>
+                    <EditModal
+                        item={activeEditItem}
+                        setIsCartUpdating={setIsCartUpdating}
+                        setActiveEditItem={setActiveEditItem}
+                    />
+                </Suspense>
             </Fragment>
         );
     }

diff --git a/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressBook.js b/packages/venia-ui/lib/components/CheckoutPage/AddressBook/addressBook.js
@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useMemo } from 'react';
+import React, { Fragment, useEffect, useMemo, Suspense } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { shape, string, func } from 'prop-types';
 import { PlusSquare, AlertCircle as AlertCircleIcon } from 'react-feather';
@@ -9,10 +9,12 @@ import { mergeClasses } from '../../../classify';
 import Button from '../../Button';
 import defaultClasses from './addressBook.css';
 import AddressBookOperations from './addressBook.gql';
-import EditModal from '../ShippingInformation/editModal';
 import AddressCard from './addressCard';
 import Icon from '../../Icon';
 import LinkButton from '../../LinkButton';
+
+const EditModal = React.lazy(() => import('../ShippingInformation/editModal'));
+
 const errorIcon = (
     <Icon
         src={AlertCircleIcon}
@@ -155,7 +157,9 @@ const AddressBook = props => {
 
                 <div className={classes.content}>{addressElements}</div>
             </div>
-            <EditModal shippingData={activeAddress} />
+            <Suspense fallback={null}>
+                <EditModal shippingData={activeAddress} />
+            </Suspense>
         </Fragment>
     );
 };

diff --git a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentInformation.js b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentInformation.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Form } from 'informed';
 import { shape, func, string, bool, instanceOf } from 'prop-types';
@@ -9,13 +9,14 @@ import CheckoutError from '@magento/peregrine/lib/talons/CheckoutPage/CheckoutEr
 import PaymentMethods from './paymentMethods';
 import Summary from './summary';
 import { mergeClasses } from '../../../classify';
-import EditModal from './editModal';
 
 import paymentInformationOperations from './paymentInformation.gql';
 
 import defaultClasses from './paymentInformation.css';
 import LoadingIndicator from '../../LoadingIndicator';
 
+const EditModal = React.lazy(() => import('./editModal'));
+
 const PaymentInformation = props => {
     const {
         classes: propClasses,
@@ -72,7 +73,9 @@ const PaymentInformation = props => {
     );
 
     const editModal = doneEditing ? (
-        <EditModal onClose={hideEditModal} isOpen={isEditModalActive} />
+        <Suspense fallback={null}>
+            <EditModal onClose={hideEditModal} isOpen={isEditModalActive} />
+        </Suspense>
     ) : null;
 
     return (

diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, Suspense } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { func, string, shape } from 'prop-types';
 import { Edit2 as EditIcon } from 'react-feather';
@@ -9,11 +9,12 @@ import Icon from '../../Icon';
 import LoadingIndicator from '../../LoadingIndicator';
 import AddressForm from './AddressForm';
 import Card from './card';
-import EditModal from './editModal';
 import defaultClasses from './shippingInformation.css';
 import ShippingInformationOperations from './shippingInformation.gql';
 import LinkButton from '../../LinkButton';
 
+const EditModal = React.lazy(() => import('./editModal'));
+
 const ShippingInformation = props => {
     const { classes: propClasses, onSave, toggleActiveContent } = props;
     const talonProps = useShippingInformation({
@@ -50,7 +51,9 @@ const ShippingInformation = props => {
     }
 
     const editModal = !isSignedIn ? (
-        <EditModal shippingData={shippingData} />
+        <Suspense fallback={null}>
+            <EditModal shippingData={shippingData} />
+        </Suspense>
     ) : null;
 
     const shippingInformation = doneEditing ? (

diff --git a/packages/venia-ui/lib/components/Header/accountTrigger.js b/packages/venia-ui/lib/components/Header/accountTrigger.js
@@ -1,15 +1,16 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, Suspense } from 'react';
 import { useIntl } from 'react-intl';
 import { shape, string } from 'prop-types';
 
 import { useAccountTrigger } from '@magento/peregrine/lib/talons/Header/useAccountTrigger';
 import { mergeClasses } from '@magento/venia-ui/lib/classify';
 
 import AccountChip from '../AccountChip';
-import AccountMenu from '../AccountMenu';
 
 import defaultClasses from './accountTrigger.css';
 
+const AccountMenu = React.lazy(() => import('../AccountMenu'));
+
 /**
  * The AccountTrigger component is the call to action in the site header
  * that toggles the AccountMenu dropdown.
@@ -51,11 +52,13 @@ const AccountTrigger = props => {
                     />
                 </button>
             </div>
-            <AccountMenu
-                ref={accountMenuRef}
-                accountMenuIsOpen={accountMenuIsOpen}
-                setAccountMenuIsOpen={setAccountMenuIsOpen}
-            />
+            <Suspense fallback={null}>
+                <AccountMenu
+                    ref={accountMenuRef}
+                    accountMenuIsOpen={accountMenuIsOpen}
+                    setAccountMenuIsOpen={setAccountMenuIsOpen}
+                />
+            </Suspense>
         </Fragment>
     );
 };