I can confirm this is happening in prod, but only for when a page is not watched. @Catrope s analysis looks correct, this is because we only load 'star' in "skins.vector.icons.js", but not in "skins.vector.icons". We do load 'unstar' in both cases though, which is why it works fine when a page is watched.

This also happens for all cases when JS is disabled after we start using Codex icons, but this is because of specificity issues from Vector incorrectly passing in an empty string to the CSS icon mixin in order to create a generic icon class (Notice how the background image applied by core icon classes are overridden F37098339)

Change 928683 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Make star module render blocking.

https://gerrit.wikimedia.org/r/928683

This appears to be caused by the watch star icon being loaded as part of non-render-blocking styles, whereas it should be loaded as part of render-blocking styles.

The icon styles appear to be render blocking to me (with the slight caveat that @bwang points) - they are in skins.vector.icons module which is in the style module (https://github.com/wikimedia/mediawiki-skins-Vector/blob/master/skin.json#L307). Note, we use a SVG file URL for the background image rather than embedding the SVG as that would lead to a substantial increase in render blocking styles. Is that perhaps what you are referring to? I don't think the image itself should be render blocking.

Is https://gerrit.wikimedia.org/r/928683 all that's needed to call this fixed?

In T337524#8916627, @Jdlrobson wrote:

This appears to be caused by the watch star icon being loaded as part of non-render-blocking styles, whereas it should be loaded as part of render-blocking styles.

The icon styles appear to be render blocking to me (with the slight caveat that @bwang points) - they are in skins.vector.icons module which is in the style module (https://github.com/wikimedia/mediawiki-skins-Vector/blob/master/skin.json#L307). Note, we use a SVG file URL for the background image rather than embedding the SVG as that would lead to a substantial increase in render blocking styles. Is that perhaps what you are referring to? I don't think the image itself should be render blocking.

I think that's fine, the image itself (embedded SVG) doesn't need to be render-blocking, but the CSS pointing to the SVG URL does need to be. Right now the icon doesn't load at all when JS is disabled; if it was an issue of embedded SVG vs a URL to an SVG, it would load after a short delay.

Is https://gerrit.wikimedia.org/r/928683 all that's needed to call this fixed?

I think so, assuming that skins.vector.icons is a render-blocking module and skins.vector.icons.js is not (I haven't verified this in the code but it seems like a good guess based on the naming)

Change 928683 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Move star icon to render blocking module

https://gerrit.wikimedia.org/r/928683