Avoid flickering of admin notices

[birgire]

Here's an example:

• Save settings on the General Settings page (wp-admin/options-general.php)
• Then the "Saved settings" admin notice displays first above the page header.
• Then it moves below it, causing flickering.

The admin notices are moved with Javascript in wp-admin/js/common.js

/*
 * The `.below-h2` class is here just for backward compatibility with plugins
 * that are (incorrectly) using it. Do not use. Use `.inline` instead. See #34570.
 * If '.wp-header-end' is found, append the notices after it otherwise
 * after the first h1 or h2 heading found within the main content.
 */
 if ( ! $headerEnd.length ) {
     $headerEnd = $( '.wrap h1, .wrap h2' ).first();
 }
 $( 'div.updated, div.error, div.notice' ).not( '.inline, .below-h2' ).insertAfter( $headerEnd );

See ticket #35047 and changeset [36134]. Also ticket #34570 and changeset [35516].

The same happens for notices on the other admin Settings screens, like:

• wp-admin/options-writing.php
• wp-admin/options-reading.php
• wp-admin/options-discussion.php
• wp-admin/options-permalink.php
• wp-admin/profile.php
• wp-admin/user-edit.php?user_id=123
• ... etc ...

We should avoid this flickering, e.g. hide it with CSS and display it with Javascript?

I guess we should also consider the case if Javascript is turned off?

Related #43978 Avoid flickering on the Tools / Export page

[subrataemfluence]

I could not reproduce it for any of the mentioned pages.
I went to those pages and Saved without making any changes.

Are you on a clean WordPress install and without any 3rd party plugin?
Am I missing something?

[birgire]

@subrataemfluence thanks for checking.

It's on a clean trunk install, but I had a single plugin active, the Query Monitor plugin.

That seems to delay things here ;-)

You're right, that without it this is almost not noticable.

PS: I tested saving settings here (without QM):

wp-admin/options-media.php

and I noticed the flicker in 3 times out of 10.

It could also depend on how fit the browser is at the time ;-)

[subrataemfluence]

Please let me know the exact steps to reproduce.

[birgire]

@subrataemfluence:

• Clean install from development trunk (no plugins activated).
• Goto /wp-admin/options-media.php.
• Save changes.
• I tested in Chrome browser and the flicker shows in c.a. 1 out of 5 times.
• I tested in Edge browser and the flicker always shows.

CPU on my Windows 10 is < 40%

flickering-on-saving-media-options.gif​ is a screen-recording from a clean trunk install (no plugins) in Chrome.