X loading to custom image

x_loading_to_custom_image.js

// ==UserScript==
// @name         Replace X loading with an image
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Replace an SVG element with an image on Twitter within the div with aria-label "loading".
// @author       You
// @match        https://twitter.com/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function () {
  'use strict';
  const imageUrl = 'https://pbs.twimg.com/media/FqJdwH1agAAd7Yx?format=png&name=small';
  const imageSizeWidth = '586px'; // Change this to the desired width
  const imageSizeHeight = '360px'; // Change this to the desired height

  // Function to replace the SVG element with an image
  function replaceSvgWithImage(svgElement, imageUrl) {
    const imageElement = document.createElement('img');
    imageElement.src = imageUrl;
    imageElement.style.width = imageSizeWidth;
    imageElement.style.height = imageSizeHeight;
    imageElement.style.display = 'block'; // Ensure the image behaves as a block element
    imageElement.style.margin = 'auto'; // Center the image horizontally
    imageElement.style.position = 'absolute'; // Allow centering vertically
    imageElement.style.top = '50%'; // Move the image vertically by 50% of its container
    imageElement.style.left = '50%'; // Move the image horizontally by 50% of its container
    imageElement.style.transform = 'translate(-50%, -50%)'; // Adjust the position to center the image

    svgElement.parentNode.replaceChild(imageElement, svgElement);
  }

  // MutationObserver callback to handle changes in the DOM
  const mutationCallback = function (mutationsList) {
    for (const mutation of mutationsList) {
      if (mutation.type === 'childList') {
        const addedNodes = mutation.addedNodes;
        for (const node of addedNodes) {
          if (node instanceof HTMLElement) {
            // Find the SVG element within the "loading" div
            const svgElement = node.querySelector('div[aria-label="Loading…"] svg');
            if (svgElement) {
              // Replace the SVG element with your desired image URL
              replaceSvgWithImage(svgElement, imageUrl);
            }
          }
        }
      }
    }
  };

  // Create a new MutationObserver
  const observer = new MutationObserver(mutationCallback);

  // Observe changes in the body of the document
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
})();