• Lukas Eipert's avatar
    Chrome/Edge 84: More performant svg workaround solution · 4c58e9ea
    Lukas Eipert authored
    Instead of svg4everybody we use a custom more performant solution.
    Unfortunately svg4everybody had a big performance impact on pages with a
    lot of icons: https://gitlab.com/gitlab-org/quality/performance/-/issues/312
    
    We load our sprite icons with JS and add them to the body.
    Then we iterate over all the `use` elements and replace their reference
    to that svg which we added internally. In order to avoid id conflicts,
    those are renamed with a unique prefix.
    
    We do that once the DOMContentLoaded fired and otherwise we use a
    mutation observer to re-trigger this logic.
    
    In order to not have a big impact on performance or to cause flickering
    of of content,
    
    1. we only do it for each svg once
    2. we debounce the event handler and just do it in a requestIdleCallback
    4c58e9ea
chrome_84_icon_fix.js 2.77 KB