The issue is split from {T271874}.
When Special:MediaSearch page loads (re-loads), the search icon and the clear button (the 'x' button) load after the grid images finished loading.
Use cases
- a user re-loads the page
- a user pastes the link
{F33997186,width=600}
**Note:**
- When a new search is submitted, the icons are visible to users all the time.
- **Special:MediaSearch** takes some time to load the images and all that time the search icon is not visible.
- The search icon on **Special:Search** page is flashing during the page reload. Since Special:Search page loads faster than Special:MediaSearch,so users more likely do not notice it.
- **Special:Search** does not display `x` icon while the results are being loaded.
The solution here is just for this one icon in the search bar because it's so prominent, not a general solution for all other icons that we use.
---
Acceptance criteria:
- [] The code for the search icon within the search input in the JS UI is copied and pasted into the PHP template (`SERPWidget.mustache+dom`). See the code for the select handle icon for an example of how this has been done before (line 94 of the SERPWidget file)
- [] The search icon in the PHP UI renders exactly the same as it does in the JS UI, so that there is no layout adjustment or visual issues when the PHP UI is replaced by the Vue UI