Hmmm could also not reproduce on iOS 15.4.1 Safari on iPhone :-/.

I always tests a template on en.wiki and de.wiki. On de.wiki I tested one with warning message. The icons always showed right away.

So strange!! It's very consistent for me. Just checked and it's Safari 15.4 on iOS 15.4. Is there something else I can check to see if that's why this is happening for me?

But also that's good news that it doesn't seem to be a widespread problem.

Couldn't reproduce on Safari or DuckDuckGo, iOS 15.4.1 . I can't think of what would be different about our setups, at the moment. "After clicking around" is really strange. Can you try another browser?

Couldn't reproduce on Safari or DuckDuckGo, iOS 15.4.1 . I can't think of what would be different about our setups, at the moment. "After clicking around" is really strange. Can you try another browser?

Just tried on firefox and there was no issue. So I guess we have it narrowed down to Safari at least? A very mysterious bug.

I've also confirmed that icons are visible when I'm logged-in but not always when I'm anon. I also went back to make a screen recording and seems like it's also happening in the context menu, not just the dialog. I'm not sure if you can tell from the video I recorded but when I click on the template first I don't see the puzzle or the edit icons. They only appear when I tap on the template a second time. Also when I'm in the dialog for some reason the ? icon was visible this time but the add more information one wasn't. When I click on that button, it appears.

Thanks for the screencast and the tip about being logged-out. I tried all of the same things on the "Ninguta schrenkii" article but my experience is that the icons are displayed seemingly instantaneously, once I click the template, and once I open the template for editing.

However, I was able to experience some of the pain using the following setup: Firefox browser for desktop, using the Wikipedia "mobile view", with the debugger set to throttle network to GPRS speeds, and "disable cache" checked. In this case I saw a few icons loading after the content, such as the key in the "you are not logged in" warning appearing long after the text. I was never able to reproduce the exact issue you have with the template icon or question mark loading after content. The worst effect I saw was actually much worse than what we're discussing: when clicking "Edit", I'm first presented with a wikitext source editor, which is then dynamically replaced with a readable, rendered copy of the page, which is not disabled and therefore has active links etc., until finally I get another dynamic replacement with the visual editor interface. I would imagine this bug should have a higher priority than the icons.

But I think we've at least shown that the icons loading after content is probably a general ResourceLoader thing, or at least a general VisualEditor issue, and not caused by our work. It also seems to me that this might be the better behavior than the possible alternatives (wait until all resources are present to show text, or show a FOUC)?

Unresolved—trying to make this not our problem.

I am unable to reproduce the issue at hand. I'm using https://en.m.wikipedia.org/wiki/Ninguta_schrenckii, and tried both logged-in and logged-out, in Safari and in Firefox, with no cache and a 2G-throttled connection, which I believe would be the most likely circumstances in which a possible delay for a new icon would be observed.

Upon closer inspection I observe to things:

1. The icon in question is an SVG that is loaded inline as an embedded data URI:

.oo-ui-image-progressive.oo-ui-icon-edit, .mw-ui-icon-edit-progressive:before {
/* … */
background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%222… 0L12 3.23zM1 14.25V19h4.75l9.96-9.96-4.75-4.75z%22/%3E %3C/g%3E%3C/svg%3E");
}

This means there can generally be no (observable) delay for the applied styles to render the icon, as there is nothing to be downloaded, regardless of whether it's the first time opening the current version of VisualEditor on this device, and regardless of network speed.

An alternate theory might be that it's not exactly the icon file that is late, but the entire stylesheet that it is a part of.

2. The stylesheet that delivers these CSS rules is part of the oojs-ui.styles.icons-editing-core module bundle.

This module is in the ext.visualEditor.mwextensions dependency chain:

• ext.visualEditor.mwextensions
  • ...
  • ext.visualEditor.mwtransclusion
  • ext.visualEditor.icons
    • ...
    • oojs-ui.styles.icons-editing-core

This in turn is included in ext.visualEditor.mobileArticleTarget, which is a hard dependency of mobile.editor.ve.

Thus I believe it is, in theory, not possible for the editor user interface to have initialised in a way that allows you to click on the infobox and yet for the icon stylesheet and the pencil icon file to not have been loaded by that point. It seems OOUI and VisualEditor are declaring their intention correctly, and ResourceLoader appears to be implementing that intent correctly.

@Andrew-WMDE may have just solved this. While we were having a call about something else, the same thing happened to me again and he suggested that I turn off my content blocker ... and the icons appeared!