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

Manual testing of the latest MR
Screencasts linked to in the user interface changes section

User interface changes

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

API changes

None.

Issue fork drupal-2209063

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Support from Acquia helps fund testing for Drupal Acquia logo

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

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

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.

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

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.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.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.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.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.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.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

nod_’s picture

Version: 8.8.x-dev » 9.1.x-dev
Issue tags: -JavaScript +JavaScript

Still an issue for slow connections

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

bnjmnm made their first commit to this issue’s fork.

bnjmnm’s picture

Status: Needs work » Needs review

If we rename the icon-including css files to use the pcss.css extension, they are targeted by a CSS build process already in core that was introduced with Claro. This process includes changing CSS using url('./path/to/svg') to url("data:image/svg+xml etc..."). Changing these to data uris eliminates the latency reported here.

quietone’s picture

This was a bugsmash target today. There is a new MR that needs manual testing. i have updated the Issue Summary accordingly.

lauriii’s picture

Status: Needs review » Needs work

Left comment on the MR.

I assume this bug would not exist for the core icons when using Claro because Claro overrides this CSS. I'm also wondering if we should do something to reach out to contrib maintainers to encourage all contrib modules adding new items to the toolbar to also preload their icons.

bnjmnm’s picture

Issue tags: +Field UX
bnjmnm’s picture

Status: Needs work » Needs review
tim.plunkett’s picture

Assigned: Unassigned » lauriii
lauriii’s picture

Status: Needs review » Reviewed & tested by the community
FileSize
2.67 MB
4.04 MB

Looks good. Thank you for addressing the feedback @bnjmnm!

lauriii’s picture

Assigned: lauriii » Unassigned

  • ckrina committed 22fa9687 on 10.1.x
    Issue #2209063 by bnjmnm, Sam152, tarekdj, lauriii, Wim Leers,...
ckrina’s picture

Status: Reviewed & tested by the community » Fixed

Committed 22fa968 and pushed to 10.1.x. Thanks!

quietone’s picture

Issue tags: -Needs manual testing

Removing testing tag, there are gifs in #37

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.