Merge pull request #6727 from guardian/ahe/make-lazy-loading-default

Make lazy loading default on checkouts

support-frontend/app/controllers/Application.scala

@@ -499,7 +499,7 @@ class Application(
   def productCheckoutRouter(countryGroupId: String) = MaybeAuthenticatedAction { implicit request =>
     implicit val settings: AllSettings = settingsProvider.getAllSettings()
     val geoData = request.geoData
-    val serversideTests = generateParticipations(List("lazyLoading"))
+    val serversideTests = generateParticipations(Nil)
     val isTestUser = testUserService.isTestUser(request)
     // This will be present if the token has been flashed into the session by the PayPal redirect endpoint
     val guestAccountCreationToken = request.flash.get("guestAccountCreationToken")

support-frontend/app/views/router.scala.html

@@ -23,7 +23,7 @@
 @main(
   title = "Support the Guardian | Checkout",
   mainElement = assets.getSsrCacheContentsAsHtml(divId = "router", file = "ssr-holding-content.html"),
-  mainJsBundle = if (serversideTests.get("lazyLoading").contains(Variant)) RefPath("[countryGroupId]/lazyRouter.js")  else RefPath("[countryGroupId]/router.js"),
+  mainJsBundle = RefPath("[countryGroupId]/router.js"),
   mainStyleBundle = None,
   description = Some("Help us deliver the independent journalism the world needs. Support the Guardian by making a contribution."),
   canonicalLink = Some("https://support.theguardian.com/checkout"),

support-frontend/assets/pages/[countryGroupId]/checkout.tsx

@@ -275,5 +275,3 @@ export function Checkout({ geoId, appConfig, abParticipations }: Props) {
 		</Elements>
 	);
 }
-
-export default Checkout;

support-frontend/assets/pages/[countryGroupId]/guardianAdLiteLanding/guardianAdLiteLanding.tsx

@@ -49,5 +49,3 @@ export function GuardianAdLiteLanding({
 		</LandingPageLayout>
 	);
 }
-
-export default GuardianAdLiteLanding;

support-frontend/assets/pages/[countryGroupId]/oneTimeCheckout.tsx

@@ -59,5 +59,3 @@ export function OneTimeCheckout({
 		</Elements>
 	);
 }
-
-export default OneTimeCheckout;

support-frontend/assets/pages/[countryGroupId]/router.tsx

@@ -1,55 +1,88 @@
+import { lazy, Suspense } from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { HoldingContent } from 'components/serverSideRendered/holdingContent';
 import { parseAppConfig } from 'helpers/globalsAndSwitches/window';
 import {
 	getAbParticipations,
 	setUpTrackingAndConsents,
 } from 'helpers/page/page';
 import { renderPage } from 'helpers/rendering/render';
 import { geoIds } from 'pages/geoIdConfig';
-import { Checkout } from './checkout';
-import { GuardianAdLiteLanding } from './guardianAdLiteLanding/guardianAdLiteLanding';
-import { OneTimeCheckout } from './oneTimeCheckout';
-import { ThankYou } from './thankYou';
 
 const abParticipations = getAbParticipations();
 setUpTrackingAndConsents(abParticipations);
 const appConfig = parseAppConfig(window.guardian);
 
+const Checkout = lazy(() => {
+	return import(/* webpackChunkName: "checkout" */ './checkout').then((mod) => {
+		return { default: mod.Checkout };
+	});
+});
+const OneTimeCheckout = lazy(() => {
+	return import(
+		/* webpackChunkName: "oneTimeCheckout" */ './oneTimeCheckout'
+	).then((mod) => {
+		return { default: mod.OneTimeCheckout };
+	});
+});
+const ThankYou = lazy(() => {
+	return import(/* webpackChunkName: "ThankYou" */ './thankYou').then((mod) => {
+		return { default: mod.ThankYou };
+	});
+});
+const GuardianAdLiteLanding = lazy(() => {
+	return import(
+		/* webpackChunkName: "GuardianAdLiteLanding" */ './guardianAdLiteLanding/guardianAdLiteLanding'
+	).then((mod) => {
+		return { default: mod.GuardianAdLiteLanding };
+	});
+});
+
 const router = createBrowserRouter(
 	geoIds.flatMap((geoId) => [
 		{
 			path: `/${geoId}/checkout`,
 			element: (
-				<Checkout
-					geoId={geoId}
-					appConfig={appConfig}
-					abParticipations={abParticipations}
-				/>
+				<Suspense fallback={<HoldingContent />}>
+					<Checkout
+						geoId={geoId}
+						appConfig={appConfig}
+						abParticipations={abParticipations}
+					/>
+				</Suspense>
 			),
 		},
 		{
 			path: `/${geoId}/one-time-checkout`,
 			element: (
-				<OneTimeCheckout
-					geoId={geoId}
-					appConfig={appConfig}
-					abParticipations={abParticipations}
-				/>
+				<Suspense fallback={<HoldingContent />}>
+					<OneTimeCheckout
+						geoId={geoId}
+						appConfig={appConfig}
+						abParticipations={abParticipations}
+					/>
+				</Suspense>
 			),
 		},
 		{
 			path: `/${geoId}/thank-you`,
 			element: (
-				<ThankYou
-					geoId={geoId}
-					appConfig={appConfig}
-					abParticipations={abParticipations}
-				/>
+				<Suspense fallback={<HoldingContent />}>
+					<ThankYou
+						geoId={geoId}
+						appConfig={appConfig}
+						abParticipations={abParticipations}
+					/>
+				</Suspense>
 			),
 		},
 		{
 			path: `/${geoId}/guardian-ad-lite`,
-			element: <GuardianAdLiteLanding geoId={geoId} />,
+			element: (
+				<Suspense fallback={<HoldingContent />}>
+					<GuardianAdLiteLanding geoId={geoId} />
+				</Suspense>
+			),
 		},
 	]),
 );

support-frontend/assets/pages/[countryGroupId]/thankYou.tsx

@@ -173,5 +173,3 @@ export function ThankYou({
 		/>
 	);
 }
-
-export default ThankYou;

support-frontend/webpack.entryPoints.js

@@ -1,7 +1,6 @@
 module.exports = {
 	common: {
 		'[countryGroupId]/router': 'pages/[countryGroupId]/router.tsx',
-		'[countryGroupId]/lazyRouter': 'pages/[countryGroupId]/lazyRouter.tsx',
 		'[countryGroupId]/events/router':
 			'pages/[countryGroupId]/events/router.tsx',
 		favicons: 'images/favicons.ts',