Update loading icon and use SVG

Created on 25 September 2015, over 8 years ago
Updated 6 June 2024, 10 days ago

Problem/Motivation

The animated GIFs loading.gif and loading-small.gif icons look poor on HiDPI displays.

Note: some instances of .ajax-progress-throbber currently reference loading-small.gif, while others reference throbber-active.gif. throbber-active.gif is being worked on in a separate issue #1974928 โ†’ .

Proposed resolution

  • Replace the animated GIF file loading.gif with an animated scalable vector graphic (SVG) loading.svg that matches the look and feel.

  • Replace the animated GIF file loading-small.gif with an animated scalable vector graphic (SVG) loading-small.svg that matches the look and feel.

  • Update all references in Drupal core where loading-small.gif was previously used in the CSS background-image, including some instances of .ajax-progress-throbber and all instances of .ajax-progress-fullscreen. Since loading.gif is not referenced anywhere in Drupal core except in a single test, no CSS or IMG tag changes are required for this image.

  • Add an .htaccess RedirectRule to forward requests to the deleted GIF images to their respective SVG image equivalents.

Before / After comparison:

  1. loading.gif => loading.svg
    https://codepen.io/jameswilson/pen/OJYXqZE

  2. loading-small.gif => loading-small.svg
    https://codepen.io/jameswilson/pen/oNRLVxx

Remaining tasks

  1. Create an MR.
  2. Review and commit.

User interface changes

Users on devices with high resolution screens will see a modern, crisp image with no diffusion artifacts or blur inherent from legacy image formats.

Users on devices with low resolution may or may not notice any visual difference.

API changes

In as much as images can be considered an "API", the old GIF files will be removed. In case any themes still reference the old images, the routes to these static assets can be redirected at the server level to the new SVG assets. Such redirects have been added to the .htaccess file shipped with Drupal core.

Data model changes

None.

Release notes snippet

Not necessary.

๐Ÿ“Œ Task
Status

Needs review

Version

11.0 ๐Ÿ”ฅ

Component
Ajaxย  โ†’

Last updated about 22 hours ago

Created by

๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Gauravvv Delhi, India

    Gauravvvv โ†’ made their first commit to this issueโ€™s fork.

  • Merge request !8143Updated loading icon and use SVG โ†’ (Open) created by Unnamed author
  • Pipeline finished with Canceled
    25 days ago
    Total: 117s
    #178777
  • Status changed to Needs review 25 days ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Gauravvv Delhi, India
  • Pipeline finished with Failed
    25 days ago
    Total: 531s
    #178779
  • ๐Ÿ‡ญ๐Ÿ‡บHungary Balu Ertl Budapest ๐Ÿ‡ช๐Ÿ‡บ

    Balu Ertl โ†’ made their first commit to this issueโ€™s fork.

  • Pipeline finished with Success
    25 days ago
    Total: 624s
    #179243
  • Status changed to Needs work 23 days ago
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    I setup a codepen to review the before (GIF) and after (SVG) from the MR.

    https://codepen.io/jameswilson/pen/wvbWNbr

    Things are really close and this is exciting!

    I found a few minor but important things to consider:

    • The SVG duration is currently 1.0 seconds, but the GIF duration is 0.8 seconds (verified by uploading the current <a href="https://git.drupalcode.org/project/drupal/-/raw/d40360cb42b154235c5ec3f2edf7696f211f5726/core/misc/loading-small.gif">loading-small.gif</a> to ezgif.com (here). One second appears slower and more lethargic, which is not what you want to portray when displaying a loader. There needs to be a slight sense of urgency that 0.8 seconds provides, versus 1 second.
    • The GIF size is 24 x 24 pixels, the SVG is 25 x 25. I suggest we maintain the same dimensions by default if possible (people can always resize it with CSS later, and since its a vector it will still look good!
    • Needs testing on simplytest.me with a before/after screenshot to ensure the rounded corners applied via CSS still look good.
    • Issue needs summary update, and we should hide all the old patches, attachments, and approaches.
  • Pipeline finished with Success
    23 days ago
    Total: 576s
    #180639
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    I've pushed fixes for the two items, and created a new codepen for comparison:

    0.8s at 24px

    https://codepen.io/jameswilson/pen/oNRLVxx

    Compare against previous pen with 1s at 25px

    https://codepen.io/jameswilson/pen/wvbWNbr

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    Restore issue summary lost by comment #43.

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    Clean up issue summary.

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    Hide file attachments from previous approaches in the issue summary.

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    Remaining tasks:

    • Needs replacement for loading.gif => loading.svg (with roughly the same SVG used for loading-small.svg, only with different dimensions.
    • Needs testing on simplytest.me with a before/after screenshots of loading.svg and loading-small.svg, to ensure no visual regressions.
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    I found an instance of loading-small.gif in the starterkit_theme that can be removed:

    ./core/themes/starterkit_theme/images/icons/loading-small.gif

  • Pipeline finished with Canceled
    23 days ago
    #180657
  • Pipeline finished with Canceled
    23 days ago
    Total: 49s
    #180662
  • Status changed to Needs review 23 days ago
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    I've fixed both points made in #60. NR.

  • Pipeline finished with Success
    23 days ago
    Total: 668s
    #180663
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    Since we're deleting the GIFs, we may want to consider adding a .htaccess rules to redirect the requests for the deleted GIF images to their respective SVG image counterparts. Thoughts?

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3
  • Pipeline finished with Failed
    23 days ago
    Total: 700s
    #180672
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    I've created a comparison codepen for loading.gif => loading.svg

    https://codepen.io/jameswilson/pen/OJYXqZE?

  • Status changed to Needs work 16 days ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    May need a rebase. Reran the unit tests multiple time but fails each.

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    Rebased.

  • Status changed to Needs review 14 days ago
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3
  • Pipeline finished with Failed
    14 days ago
    Total: 539s
    #188396
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    There are all kinds of seemingly unrelated test failures after the rebase. It seems the 11.x branch may be a bit unstable at the moment.

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3
  • Pipeline finished with Success
    14 days ago
    Total: 640s
    #188436
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    Yay. tests pass now

  • Status changed to Needs work 12 days ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    So brought this in #frontend and consensus seems to be these images could be used by third party modules so we can't delete. And there is no mechanism for deprecating images so can only remove in a major (D12)

    So will need to add those images back and a CR in this ticket about the images being removed in 12

    Opened ๐Ÿ“Œ [12.x] Remove images that have been replaced in core Active for D12 to remove those images later.

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    Forgive my ignorance, but isn't D11 the next major?

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    There's already a beta out for 11 so believe we have missed the boat. Why most deprecations are now going to D12.

    Don't need to delete now just need to add the deleted images back, still using the new svgs, and add a CR. Gives contrib modules time to update if they are using.

    Then when 12 opens we have that one ticket as a reminder to go and delete the images.

  • Status changed to Needs review 10 days ago
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    I've restored core/misc/loading.gif and core/misc/loading-small.gif.

    I did not restore the loading GIF in the starterkit theme, because by its very nature, it is not intended to be referenced, but instead forked/copied and manipulated. There's no need to ship starterkit with a file that will never be used.

    And there is no mechanism for deprecating images so can only remove in a major (D12)

    I get what you mean, and understand that the files can only be removed in a major upgrade, but I should clarify that the MR does include a mechanism for deprecating the old images which I think will work in the current D11 beta. Specifically:

    • Make an addition to .htaccess to redirect requests to the old files to the new files.
    • Ensure the new files are the exact same size and dimensions of the originals.
    • Write a CR to explain that the files are deprecated in D11.0 (assuming this gets in soon) and that themes and modules should check for references to these files and update them accordingly for D12 and optionally D11.
  • Pipeline finished with Success
    10 days ago
    Total: 712s
    #192308
Production build 0.69.0 2024