Remove LoadingEllipsis from initial document render (#102441)

jsnajdr · web-flow · commit d7892acf4b3a · 2025-04-16T09:46:48.000+02:00
* Remove LoadingEllipsis from initial document render

* Import path.parse directly to avoid variable name conflict
diff --git a/client/document/index.jsx b/client/document/index.jsx
@@ -1,4 +1,4 @@
-import path from 'path';
+import { parse } from 'path';
 import config from '@automattic/calypso-config';
 import { isLocaleRtl } from '@automattic/i18n-utils';
 import { Step } from '@automattic/onboarding';
@@ -18,7 +18,6 @@ import EnvironmentBadge, {
 import Head from 'calypso/components/head';
 import JetpackLogo from 'calypso/components/jetpack-logo';
 import Loading from 'calypso/components/loading';
-import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
 import WooCommerceLogo from 'calypso/components/woocommerce-logo';
 import WordPressLogo from 'calypso/components/wordpress-logo';
 import isA8CForAgencies from 'calypso/lib/a8c-for-agencies/is-a8c-for-agencies';
@@ -74,7 +73,7 @@ class Document extends Component {
 
 		const installedChunks = entrypoint.js
 			.concat( chunkFiles.js )
-			.map( ( chunk ) => path.parse( chunk ).name );
+			.map( ( chunk ) => parse( chunk ).name );
 
 		const inlineScript =
 			`var COMMIT_SHA = ${ jsonStringifyForHtml( commitSha ) };\n` +
@@ -134,15 +133,6 @@ class Document extends Component {
 			}
 		}
 
-		const shouldNotShowLoadingLogo =
-			sectionName === 'checkout' || sectionName === 'stepper' || sectionName === 'signup';
-
-		const LoadingLogo = chooseLoadingLogo( this.props, {
-			isWpMobileApp: app?.isWpMobileApp,
-			isWcMobileApp: app?.isWcMobileApp,
-			isWCCOM,
-		} );
-
 		return (
 			<html
 				lang={ lang }
@@ -197,17 +187,12 @@ class Document extends Component {
 								} ) }
 							>
 								<div className="layout__content">
-									{ shouldNotShowLoadingLogo ? (
-										<>
-											{ showStepContainerV2Loader ? (
-												<Step.Loading />
-											) : (
-												<Loading className="wpcom-loading__boot" />
-											) }
-										</>
-									) : (
-										<LoadingLogo size={ 72 } className="wpcom-site__logo" />
-									) }
+									<LoadingPlaceholder
+										app={ app }
+										sectionName={ sectionName }
+										isWCCOM={ isWCCOM }
+										showStepContainerV2Loader={ showStepContainerV2Loader }
+									/>
 								</div>
 							</div>
 						</div>
@@ -312,12 +297,27 @@ class Document extends Component {
 		);
 	}
 }
+function LoadingPlaceholder( { app, sectionName, isWCCOM, showStepContainerV2Loader } ) {
+	const shouldNotShowLoadingLogo =
+		sectionName === 'checkout' || sectionName === 'stepper' || sectionName === 'signup';
 
-function chooseLoadingLogo( { useLoadingEllipsis }, { isWpMobileApp, isWcMobileApp, isWCCOM } ) {
-	if ( useLoadingEllipsis ) {
-		return LoadingEllipsis;
+	if ( shouldNotShowLoadingLogo ) {
+		return showStepContainerV2Loader ? (
+			<Step.Loading />
+		) : (
+			<Loading className="wpcom-loading__boot" />
+		);
 	}
 
+	const LoadingLogo = chooseLoadingLogo( {
+		isWpMobileApp: app?.isWpMobileApp,
+		isWcMobileApp: app?.isWcMobileApp,
+		isWCCOM,
+	} );
+	return <LoadingLogo size={ 72 } className="wpcom-site__logo" />;
+}
+
+function chooseLoadingLogo( { isWpMobileApp, isWcMobileApp, isWCCOM } ) {
 	if ( isWcMobileApp || isWCCOM ) {
 		return WooCommerceLogo;
 	}
diff --git a/client/server/pages/index.js b/client/server/pages/index.js
@@ -197,7 +197,6 @@ function getDefaultContext( request, response, entrypoint = 'entry-main' ) {
 			config.isEnabled( 'use-translation-chunks' ) ||
 			flags.includes( 'use-translation-chunks' ) ||
 			request.query.hasOwnProperty( 'useTranslationChunks' ),
-		useLoadingEllipsis: !! request.query.loading_ellipsis,
 		showGdprBanner,
 		showStepContainerV2Loader: isInStepContainerV2FlowContext( request.path, request.query ),
 	} );
