Fix your Flash of Unstyled Content FOUC

[@shibupandit24]

How to modify this code for bricks builder ?

[@websquadron]

Try this - but make a Backup first.
add_action( 'wp_enqueue_scripts', function() {
if ( ! did_action( 'bricks_enqueue_styles' ) ) {
return;
}
// Replace this with your actual Bricks template ID
$template_id = 4040;
// Enqueue the CSS file associated with the Bricks template (custom logic here if needed)
$css_file_url = get_template_directory_uri() . '/path-to-your-css-file.css';
if ( file_exists( get_template_directory() . '/path-to-your-css-file.css' ) ) {
wp_enqueue_style( 'custom-bricks-style', $css_file_url, [], filemtime( get_template_directory() . '/path-to-your-css-file.css' ) );
}
}, 500 );

[@GhostiePostie]

I dont know if you had this one planned already or you actually listened to my previous comment, but thank you Imran! Much love for all you do in this space, cheers.

[@websquadron]

This was recorded 'months' ago :) :)

[@hosseinkhanmohammadi4770]

Hi Imran. Thanks for the video.
I have an unrelated question. :))
Do you prefer a curved or flat monitor for design & web design projects? 🤭

[@websquadron]

Curved if it’s widescreen. Flat if it’s less than 29”

[@hosseinkhanmohammadi4770]

Thanks 🎉 ​@@websquadron

[@Unfunctional]

Hey, so if I add specific page ID (like in your code snippet) will it fix FOUC only for that page?

[@websquadron]

Yes. But you could add more. Though I would check as to why it keeps happening. Check your CSS styling or optimisation settings for CSS Minification or Aggregation.

[@QuaverloveStudio]

Thanks for that, Imran.
I added the code to Code Snippets, but I'm getting a syntax error on line 2: 'unexpected token "if"'.Searching around to find what the problem could be

[@websquadron]

Could be due to you using older PHP - maybe?
Try this:
function enqueue_elementor_template_css() {
if ( ! class_exists( '\Elementor\Core\Files\CSS\Post' ) ) {
return;
}
$template_id = 4040;
$css_file = new \Elementor\Core\Files\CSS\Post( $template_id );
$css_file->enqueue();
}
add_action( 'wp_enqueue_scripts', 'enqueue_elementor_template_css', 500 );

[@QuaverloveStudio]

Soon as i get home, I'll have a look.
Thanks again, Imran.

[@QuaverloveStudio]

I checked and PHP had already been updated to 8.3 for that domain.
So I tried the amended code you suggested. Not only did it not throw any errors, it works like a charm!
The fact that you resorted to a plain ol' vanilla flavoured function makes me think it's an issue with ACF's JavaScript API and, as no one else has mentioned it, then it's an issue on my end.... that's a whole 'nother episode for another time.
Thank you so much for your help, Imran.

[@heavylog1c]

This happens because WP allows plugins to embed code in footer. So it fires after the page has been loaded. Usually you need this feature to add some codes for Google Analytics in footer and stuff like that. But plugins developers also started to add their CSS and JS there and turned WP into mess. It's just a bad approach in developing imo and it should be stopped at some point. Everything should be in the head, especially CSS.

[@websquadron]

Totally agree. I do hate how many AI tools when creating codes recommend the footer placement.

[@Hsabii222]

Advanced script. What is your opinion?
add_action( 'wp_head', 'fix_fouc' );
function fix_fouc() {
echo '
body {
visibility: hidden;
}
.loaded {
visibility: visible;
}
';
}
add_action( 'wp_footer', 'add_loaded_class' );
function add_loaded_class() {
echo '
document.addEventListener("DOMContentLoaded", function() {
document.body.classList.add("loaded");
});
';
}
add_action( 'wp_enqueue_scripts', function() {
if ( ! class_exists( '\Elementor\Core\Files\CSS\Post' ) ) {
return;
}
$template_id = "id of template here";
$css_file = new \Elementor\Core\Files\CSS\Post( $template_id );
$css_file->enqueue();
}, 500 );

[@websquadron]

I'll have to check

[@Hsabii222]

@@websquadron any updates?