Problem/Motivation

Currently the SVG icons aren't preloaded. When you click and hold on an icon you haven't clicked before, the icon entirely disappears for a few seconds while its active version is loaded.

Proposed resolution

Either find a way to preload the active state icons, or find a way to reduce the flickering effect.

Remaining tasks

  • Brainstorm some ways of reducing the flickering effect, while keeping the performance impact minimal.
  • Write some patches to fix the issue.

User interface changes

Hopefully, less of a jarring user experience when clicking icons.

API changes

None.

Files: 
CommentFileSizeAuthor
#8 fix_flicker-2209063-8.patch855 bytestarekdj
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 81,114 pass(es). View
#2 2209063-2-fix-flicker-active-icons.patch12.26 KBSam152
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch 2209063-2-fix-flicker-active-icons.patch. Unable to apply patch. See the log in the details link for more information. View

Comments

Sam152’s picture

Sam152’s picture

Title: Fix the flicker of the "active" SVG icons when a user clicks on toolbar items. » Fix the flicker of the "active" icons when a user clicks on toolbar items.
FileSize
12.26 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch 2209063-2-fix-flicker-active-icons.patch. Unable to apply patch. See the log in the details link for more information. View

Here is an initial patch which attempts to solve this issue. It uses :before and :after to put one icon on top of the other, while the active icon is loading. The end result is that the old icon stays in place while the new one loads.

It's more a proof of concept than anything else, I'd be interested to hear what other solutions people have in mind.

Sam152’s picture

Status: Active » Needs review

thehong’s picture

Put one icon on top of other does not make the icon load faster. I think to preload images, we need a custom javascript code, a custom module maybe needed.

Status: Needs review » Needs work

The last submitted patch, 2: 2209063-2-fix-flicker-active-icons.patch, failed testing.

Wim Leers’s picture

Title: Fix the flicker of the "active" icons when a user clicks on toolbar items. » Fix the flicker of the "active" icons when a high-latency user clicks on toolbar items
Issue tags: +Usability, +front-end performance, +CSS, +mobile, +JavaScript

I think #2 is … creative, but quite fishy :D

The only way I can think of to do this is by having some JS preload the SVGs for the toolbar items, possibly using a heuristic such as only doing the preloading when the user hovers over the toolbar.

tarekdj’s picture

Status: Needs work » Needs review
FileSize
855 bytes
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 81,114 pass(es). View

Attached patch is a full css fix. Yes! It preloads all images in the same time but it doesn't need javascript.

Wim Leers’s picture

#8 is also creative, but equally fishy: it won't work if additional top-level admin menu links are added. Or if some are removed, then too many images will be preloaded.

I honestly don't think we can solve this issue in a reasonable way. This is up to browsers to fix. They should be smart enough to preload images that are used for alternative link states.

Sam152’s picture

I agree this is probably something that should be addressed at the browser level, however the reality is the current user experience is jarring and should still be addressed. I would also disagree with the "high latency" qualification, even locally there is a noticeable flicker.

#8's abuse of multiple background images seems fine due to the fact that we no longer support IE8. One of the issues might be as the heuristics around asset loading get better, could browsers perhaps opt out of loading assets attached to display:none elements? I remember perhaps reading this had already been implemented in some mobile browsers?

If javaScript is going to deliver the only non-fishy solution, I think it would be worth investigating.

Wim Leers’s picture

Status: Needs review » Needs work

I would also disagree with the "high latency" qualification, even locally there is a noticeable flicker.

Oh, wow! Can you look in your browser's inspector and see whether the requests take a long time to be answered by your web server then?

If javaScript is going to deliver the only non-fishy solution, I think it would be worth investigating.

Agreed.

LewisNyman’s picture

There are a few issues that could fix this problem, I've added one to the related issues. I'd rather we fix this for all situations then but a short term hacky fix in like this.

LewisNyman’s picture

The problem with both of these issue is it required changing our implementation of icons across the whole of core. It would be nice to have a lightweight wrapper so we can make changes to how icons are handled in one place: #1849712: Add theming template and prepare logic for rendering icons

Wim Leers’s picture

I'm tempted to postpone this on #1849712: Add theming template and prepare logic for rendering icons. OTOH, that issue has had so much activity and no consensus yet. And this is probably the most visible/noticeable implementations of SVG icons, so also the most important one.

Hence leaving this NW for now, but if that other issue starts to move forward fast, I think we might want to spend our time on that one first.

YesCT’s picture

Issue tags: -front-end performance +frontend performance

changing to use the more common tag, so the less common one can be deleted, so it does not show up in the auto complete and confuse people.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.