Merge pull request #202 from newfold-labs/fix/PRESS7-432-Optimize-Critical-CSS-Loading-error

optimize critical css loading error

Author: arunshenoy99

build/performance/performance.min.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-jsx-runtime', 'wp-api-fetch', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '769b0c231a65a628defd');
+<?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '3778bcaad0ca52323915');

build/performance/performance.min.js

@@ -42,9 +42,11 @@ public function __construct( Container $container ) {
 	 * @return array SDK data.
 	 */
 	public function add_to_runtime( $sdk ) {
-		$is_jetpack_boost_enabled   = is_plugin_active( 'jetpack-boost/jetpack-boost.php' );
-		$jetpack_options            = get_option( 'jetpack_options', false );
-		$is_jetpack_boost_connected = is_array( $jetpack_options ) && isset( $jetpack_options['id'] ) ? true : false;
+		$is_jetpack_boost_enabled = is_plugin_active( 'jetpack-boost/jetpack-boost.php' );
+
+		if ( isset( $_GET['page'] ) && 'nfd-performance' === $_GET['page'] ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+			delete_option( 'jb_get_started' );
+		}
 
 		$values = array(
 			'is_active'                 => $is_jetpack_boost_enabled,
@@ -56,7 +58,6 @@ public function add_to_runtime( $sdk ) {
 			'minify_css'                => $is_jetpack_boost_enabled ? get_option( 'jetpack_boost_status_minify-css', false ) : false,
 			'minify_css_excludes'       => implode( ',', get_option( 'jetpack_boost_ds_minify_css_excludes', array( 'admin-bar', 'dashicons', 'elementor-app' ) ) ),
 			'install_token'             => PluginInstaller::rest_get_plugin_install_hash(),
-			'jetpack_boost_connected'   => $is_jetpack_boost_connected,
 		);
 
 		return array_merge( $sdk, array( 'jetpackboost' => $values ) );

includes/JetpackBoost/JetpackBoost.php

@@ -96,10 +96,7 @@ public function set_options( $request ) {
 				);
 			}
 
-			if ( 'critical-css' === $field['id'] && 1 === (int) $field['value'] && class_exists( 'Automattic\Jetpack_Boost\Lib\Critical_CSS\Data_Sync_Actions\Regenerate_CSS' ) ) {
-				$css = new Regenerate_CSS();
-				$css->handle( null, null );
-			} elseif ( 'critical-css-premium' === $field['id'] ) {
+			if ( 'critical-css-premium' === $field['id'] ) {
 				$field['id'] = 'critical-css';
 			}
 

includes/RestApi/JetpackController.php

@@ -128,36 +128,51 @@ const JetpackBoost = () => {
 
 	const handleRegenerateClick = async () => {
 		setCssIsGenerating( true );
-		let iframe;
-		try {
-			await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
-			if ( ! sdk.jetpack_boost_connected ) {
-				await apiFetch( {
-					url: NewfoldRuntime.createApiUrl(
-						'/jetpack-boost/v1/connection'
-					),
-					method: 'POST',
-				} );
-			}
+
+		const response = await apiFetch( {
+			url: NewfoldRuntime.createApiUrl( '/jetpack-boost/v1/connection' ),
+			method: 'GET',
+		} );
+
+		if ( ! response?.connected ) {
 			await apiFetch( {
 				url: NewfoldRuntime.createApiUrl(
-					'/newfold-performance/v1/jetpack/regenerate_critical_css'
+					'/jetpack-boost/v1/connection'
 				),
 				method: 'POST',
 			} );
+		}
+
+		let iframe;
+		try {
+			await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );
 			const adminUrl = `${ siteUrl }/wp-admin/admin.php?page=jetpack-boost`;
 			iframe = document.createElement( 'iframe' );
 			iframe.src = adminUrl;
 			document.body.appendChild( iframe );
 			iframe.style.height = '0';
-			iframe.onload = function () {
+			iframe.onload = async function () {
 				try {
+					await new Promise( ( resolve ) =>
+						setTimeout( resolve, 500 )
+					);
 					const iframeDocument =
 						iframe.contentDocument || iframe.contentWindow.document;
 
+					const regenerateButton = iframeDocument.querySelector(
+						'div[data-testid="critical-css-meta"] button'
+					);
+
+					if ( regenerateButton ) {
+						regenerateButton.click();
+					}
+					await new Promise( ( resolve ) =>
+						setTimeout( resolve, 300 )
+					);
 					const progressBar = iframeDocument.querySelector(
 						'div[role="progressbar"]'
 					);
+
 					if ( ! progressBar ) {
 						iframe?.remove();
 						setCssIsGenerating( false );