Update Drupal's default throbber icons

Created on 19 April 2013, about 11 years ago
Updated 28 June 2024, about 3 hours ago

Problem/Motivation

The default AJAX progress throbber icons looks poor on a retina display.

Note: some instances of .ajax-progress-throbber currently reference throbber-active.gif, while others reference loading-small.gif. loading-small.gif is being worked on in a separate issue #2575253 ๐Ÿ“Œ Update loading icon and use SVG Needs review .

Proposed resolution

  • Replace throbber-active.gif with a high resolution animated SVG throbber-active.svg.
  • Replace throbber-inactive.png with a high resolution static SVG throbber-inactive.svg.
  • Maintain existing image size, color, and animation speed from the originals.
  • Replace references to each file in core ajax-progress and autocomplete stylesheets.
  • Replace references to each file Stable theme.
  • Redirect old GIFs to new SVGs in core's bundled .htaccess file.

Codepen for before/after comparison:
https://codepen.io/jameswilson/full/LYoZaXy

Before:

Inactive:
Active:

After:

Inactive: throbber-inactive.svg
Active: throbber-active.svg

Note: server limitations on uploading SVGs and/or rendering images from git.drupalcode.org prevent us from displaying the proposed SVGs inline here. See the Codepen for a better comparison.

Remaining tasks


  1. COMPLETE: (See Docs โ†’ Theming Drupal โ†’ Update the throbber โ†’

  2. COMPLETE: (See Olivero's throbber.svg).
  3. Review the code changes.
  4. Manually test and upload before/after screenshots.
  5. Since Seven was removed from core, copy issue credits from folks who worked on โœจ Update throbber icon Needs work that was split out from this issue while Seven theme was still in core.

User interface changes

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

Users on devices with low resolution may or may not notice much of a 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.

๐Ÿ“Œ Task
Status

RTBC

Version

11.0 ๐Ÿ”ฅ

Component
Ajaxย  โ†’

Last updated less than a minute ago

Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States ericduran

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

    It involves the content or handling of Cascading Style Sheets.

  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

  • Novice

    It would make a good project for someone who is new to the Drupal contribution process. It's preferred over Newbie.

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.

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    Regarding why this was marked postponed, โœจ Update throbber icon Needs work is dead. The Seven theme has been removed from Drupal 10 core.

    I see Olivero now has a custom throbber.svg but it is not a 1-to-1 against the old original throbber GIF.

    On this issue's sister issue ๐Ÿ“Œ Update loading icon and use SVG Needs review , after flailing about for a long time, the consensus became to reduce scope and get to RTBC by making the replacement a 1-to-1 (same size, color and speed). I think it makes sense to do exactly the same thing here.

    The old throbber-active.gif is still referenced in core by stable9 as well as core's default ajax-progress and autocomplete-loading CSS files, so there is good reason to get this updated.

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    I put together a codepen to compare side-by-side before/after with a fairly close 1-to-1 (speed, color, size) though the style is slightly different, and modernized.

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

    The SVG needs to be updated to use svg instead of css keyfram animation, a minor detail though.

  • Pipeline finished with Canceled
    about 1 month ago
    Total: 154s
    #180755
  • Pipeline finished with Failed
    about 1 month ago
    Total: 577s
    #180756
  • Status changed to Needs review about 1 month ago
  • ๐Ÿ‡จ๐Ÿ‡ฆCanada xmacinfo Canada

    I prefer the original throbber (SVG rendered). It looks like a single-hand clock.

    The main question being, though, can the themer change the throbber color or better yet, use her or his own SVG file?

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    can the themer change the throbber color or better yet, use her or his own SVG file?

    Yes! This is actually one of the primary reasons this issue was postponed some time ago: i.e., in order to create an overridden/custom throbber in another core theme.

    See #118 point 2.3

    I prefer the original throbber (SVG rendered). It looks like a single-hand clock.

    ๐Ÿ‘. I actually feel the same. Now that it is fairly easy for themers to override the throbber and we have an example in core already, it may be less contentious to leave the existing design as a nod to the past and a relic of our roots, as well as just a simple fact of getting to RTBC sooner.

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

    MR appears to have test failures.

    Also believe issue summary is still relevant as the current summary mentions updating bartik

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    I've restarted the pipeline. The test failures seem unrelated:

    Drupal\Tests\node\Functional\NodeTranslationUITest             0 passes   1 fails  
    
        Drupal\Tests\node\Functional\NodeTranslationUITest::testSearchIndexRebuildOnTranslationDeletion
        Behat\Mink\Exception\ResponseTextException: The text "There are 0 items
        left to index." was not found anywhere in the text of the current page.
    
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    Updating issue title to distinguish it from the other issue now moved to Seven theme queue: โœจ Update throbber icon Needs work

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

    That failure shows it needs a rebase. That issue was fixed last week

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3
  • Pipeline finished with Failed
    26 days ago
    Total: 682s
    #188385
  • Status changed to Needs review 26 days ago
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    Rebased

  • Status changed to Needs work 26 days ago
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    Okay, I've found a valid failing test having to do with htaccess scaffold file changes ...

    There was 1 failure:
        
        1) Drupal\Tests\ComposerIntegrationTest::testExpectedScaffoldFiles with
        data set #6 ('.htaccess', 'assets/scaffold/files/htaccess')
        Scaffold source and destination files must have the same contents.
        Failed asserting that two strings are equal.
        --- Expected
        +++ Actual
        @@ @@
           # Rewrite install.php during installation to see if mod_rewrite is
        working\n
           RewriteRule ^core/install\.php core/install.php?rewrite=ok [QSA,L]\n
         \n
        +  # Redirect deprecated throbbers to their SVG equivalents.\n
        +  RewriteRule ^core/misc/throbber-active\.gif$
        core/misc/throbber-active.svg [L,R=301]\n
        +  RewriteRule ^core/misc/throbber-inactive\.png$
        core/misc/throbber-inactive.svg [L,R=301]\n
        +\n
           # Pass all requests not referring directly to files in the filesystem
        to\n
           # index.php.\n
           RewriteCond %{REQUEST_FILENAME} !-f\n
        
        /builds/issue/drupal-1974928/core/tests/Drupal/Tests/ComposerIntegrationTest.php:204
        
        FAILURES!
        Tests: 60, Assertions: 421, Failures: 1, Skipped: 1.
    
  • Status changed to Needs review 26 days ago
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    Hiding attachments from previous approaches.

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3
  • Pipeline finished with Success
    26 days ago
    Total: 616s
    #188435
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    Yay. tests are passing now.

  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    I've reorganized Remaining Tasks in issue summary.

    • Moved some items from Proposed Resolution section into Remaining Tasks as Complete. These tasks are technically no longer part of the proposal and were handled elsewhere.
    • Added a step to copy issue credits from folks who worked on โœจ Update throbber icon Needs work that was split out from this issue while Seven theme was still in core.
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    I've restored the legacy throbber GIF and PNG files, per @smustgrave's comment #72 on sister ticket #2575253-72: Update loading icon and use SVG โ†’ :

    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

    I suppose this needs a CR now, but leaving in NR for adtl code review and #frontend signoff before diving deep into CR world.

  • Pipeline finished with Success
    22 days ago
    Total: 497s
    #192318
  • ๐Ÿ‡ช๐Ÿ‡จEcuador jwilson3

    I've added this issue to the list on ๐Ÿ“Œ [12.x] Remove images that have been replaced in core Active .

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

    Wasn't ignoring this way but wanted to see how the related one was handled. Can we revert the htaccess change here as well.

    Will keep an eye out for this one.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Mithun S Bangalore

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

  • Status changed to Needs review 3 days ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Mithun S Bangalore

    Updated the PR with the changes as per the #162, Please review.

  • Status changed to RTBC about 3 hours ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    changes removed

Production build 0.69.0 2024