Minify, clean up, and identify WPP's loading animation inline style tag

cabrerahector commented 2 years ago

At the moment the plugin injects this inline style tag to the <head> section of the page so ajaxified widgets can display their loading animation bar.

<style>
    @-webkit-keyframes bgslide {
        from {
            background-position-x: 0;
        }
        to {
            background-position-x: -200%;
        }
    }

    @keyframes bgslide {
            from {
                background-position-x: 0;
            }
            to {
                background-position-x: -200%;
            }
    }

    .wpp-widget-placeholder {
        margin: 0 auto;
        width: 60px;
        height: 3px;
        background: #dd3737;
        background: -webkit-gradient(linear, left top, right top, from(#dd3737), color-stop(10%, #571313), to(#dd3737));
        background: linear-gradient(90deg, #dd3737 0%, #571313 10%, #dd3737 100%);
        background-size: 200% auto;
        border-radius: 3px;
        -webkit-animation: bgslide 1s infinite linear;
        animation: bgslide 1s infinite linear;
    }
</style>

We could improve things a bit:

Let's remove the outdated CSS rules, most modern browsers no longer need them.
Let's minify the CSS rules so browsers can parse them faster (this should help loading times only if a tiny bit).
Let's add an id parameter to the tag for easier identification and so it can be manipulated (this is an user request, see Inlined style in HTML).

lflorent commented 2 years ago

Hi @cabrerahector,

Could you also provide a way to use remove_action() with your inline_loading_css action in WordPressPopularPosts\Front\Front class ?

I want to remove this inline css code and use my own css from theme.

Currently we have no possibility to achieve this :

the inline_loading_css() is not static
and/or there is no way to access to the object instance of the class

Thanks :)

cabrerahector commented 2 years ago

Yup, I can look into that as well. I'll leave a comment here when/if a find a simple way to do that @lflorent :)

lflorent commented 2 years ago

Hi @cabrerahector,

The simplest way I think is to change :

public function inline_loading_css() to public static function inline_loading_css()
add_action('wp_head', [$this, 'inline_loading_css']); to add_action('wp_head', ['WordPressPopularPosts\Front\Front', 'inline_loading_css']);

I tested and it works when I use remove_action('wp_head', array('WordPressPopularPosts\Front\Front', 'inline_loading_css'), 10); on my function.php ;)

cabrerahector commented 2 years ago

@lflorent FYI thanks for the suggestion, however I decided to go for a different solution instead:

add_filter('wpp_insert_loading_animation_styles', '__return_false');

The end result will still be the same :)

lflorent commented 2 years ago

@cabrerahector thanks for the new filter ;)

cabrerahector / wordpress-popular-posts

Minify, clean up, and identify WPP's loading animation inline style tag #318