chore(perf): load LegalWithMarkdown lazily

Author: chenba

packages/fxa-settings/src/pages/Legal/Privacy/index.test.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import LegalPrivacy, { viewName } from '.';
-import { screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
 import { usePageViewEvent, logViewEvent } from '../../../lib/metrics';
 import { FluentBundle } from '@fluent/bundle';
@@ -40,13 +40,15 @@ describe('Legal/Privacy', () => {
     jest.clearAllMocks();
   });
 
-  it('renders as expected', () => {
+  it('renders as expected', async () => {
     renderWithLocalizationProvider(<LegalPrivacy />);
-    testAllL10n(screen, bundle);
+    await waitFor(() => {
+      testAllL10n(screen, bundle);
 
-    // renders if `markdown` is undefined
-    screen.getByRole('heading', {
-      name: 'Privacy Notice',
+      // renders if `markdown` is undefined
+      screen.getByRole('heading', {
+        name: 'Privacy Notice',
+      });
     });
   });
 

packages/fxa-settings/src/pages/Legal/Privacy/index.tsx

@@ -2,12 +2,15 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import { RouteComponentProps } from '@reach/router';
-import LegalWithMarkdown, {
-  FetchLegalDoc,
-} from '../../../components/LegalWithMarkdown';
+import { FetchLegalDoc } from '../../../components/LegalWithMarkdown';
 import { LegalDocFile } from '../../../lib/file-utils-legal';
+import LoadingSpinner from 'fxa-react/components/LoadingSpinner';
+
+const LegalWithMarkdown = lazy(
+  () => import('../../../components/LegalWithMarkdown')
+);
 
 export const viewName = 'legal-privacy';
 
@@ -21,12 +24,14 @@ const LegalPrivacy = ({
   fetchLegalDoc,
 }: LegalPrivacyProps & RouteComponentProps) => {
   return (
-    <LegalWithMarkdown
-      {...{ locale, fetchLegalDoc, viewName }}
-      headingTextFtlId="legal-privacy-heading"
-      headingText="Privacy Notice"
-      legalDocFile={LegalDocFile.privacy}
-    />
+    <Suspense fallback={<LoadingSpinner fullScreen />}>
+      <LegalWithMarkdown
+        {...{ locale, fetchLegalDoc, viewName }}
+        headingTextFtlId="legal-privacy-heading"
+        headingText="Privacy Notice"
+        legalDocFile={LegalDocFile.privacy}
+      />
+    </Suspense>
   );
 };
 

packages/fxa-settings/src/pages/Legal/Terms/index.test.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import LegalTerms, { viewName } from '.';
-import { screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
 import { usePageViewEvent, logViewEvent } from '../../../lib/metrics';
 import { FluentBundle } from '@fluent/bundle';
@@ -40,13 +40,14 @@ describe('Legal/Terms', () => {
     jest.clearAllMocks();
   });
 
-  it('renders as expected', () => {
+  it('renders as expected', async () => {
     renderWithLocalizationProvider(<LegalTerms />);
-    testAllL10n(screen, bundle);
-
-    // renders if `markdown` is undefined
-    screen.getByRole('heading', {
-      name: 'Terms of Service',
+    await waitFor(() => {
+      testAllL10n(screen, bundle);
+      // renders if `markdown` is undefined
+      screen.getByRole('heading', {
+        name: 'Terms of Service',
+      });
     });
   });
 

packages/fxa-settings/src/pages/Legal/Terms/index.tsx

@@ -2,12 +2,15 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import { RouteComponentProps } from '@reach/router';
-import LegalWithMarkdown, {
-  FetchLegalDoc,
-} from '../../../components/LegalWithMarkdown';
+import { FetchLegalDoc } from '../../../components/LegalWithMarkdown';
 import { LegalDocFile } from '../../../lib/file-utils-legal';
+import LoadingSpinner from 'fxa-react/components/LoadingSpinner';
+
+const LegalWithMarkdown = lazy(
+  () => import('../../../components/LegalWithMarkdown')
+);
 
 export const viewName = 'legal-terms';
 
@@ -20,12 +23,14 @@ const LegalTerms = ({
   locale,
   fetchLegalDoc,
 }: LegalTermsProps & RouteComponentProps) => (
-  <LegalWithMarkdown
-    {...{ locale, fetchLegalDoc, viewName }}
-    headingTextFtlId="legal-terms-heading"
-    headingText="Terms of Service"
-    legalDocFile={LegalDocFile.terms}
-  />
+  <Suspense fallback={<LoadingSpinner fullScreen />}>
+    <LegalWithMarkdown
+      {...{ locale, fetchLegalDoc, viewName }}
+      headingTextFtlId="legal-terms-heading"
+      headingText="Terms of Service"
+      legalDocFile={LegalDocFile.terms}
+    />
+  </Suspense>
 );
 
 export default LegalTerms;