Page MenuHomePhabricator

[S] MediaSearch: the search icon not visible when page loads
Closed, ResolvedPublic


The issue is split from T271874: Special:MediaSearch - page load UI issues.

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

img_not_loaded2.gif (650×1 px, 1 MB)


  • 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

Event Timeline

CBogen renamed this task from MediaSearch: the search icon not visible when page loads to [S] MediaSearch: the search icon not visible when page loads.Jan 27 2021, 5:49 PM
CBogen updated the task description. (Show Details)

@mwilliams - Whilst I'm doing this, would you like the :focus and hover behavior of the icon and box to mirror that of special:search?

The icon and I think input box as well has a 0.67 opacity that changes to 1 when on hover or focus.

@Jseddon Sounds good to me, thanks for the suggestion!

Change 667895 had a related patch set uploaded (by Seddon; owner: Seddon):
[mediawiki/extensions/WikibaseMediaInfo@master] Search icon not visible when page loads

Whilst doing this ticket, I also fixed hover and focus behavior

Change 667895 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Search icon not visible when page loads

Etonkovidova updated the task description. (Show Details)