There are instances of spinners in JS files that do not use Pajamas-compliant styling, or do not use a suitable abstraction. These need to be ported/made compliant. These files are mostly "legacy", in the sense that they use deprecated libraries like jQuery. Part of the effort here is determining whether they are due to be removed, and therefore whether they should be updated at all. ## Migration strategy First, determine whether the given file is deprecated by `@mention`ing appropriate people (e.g., most significant author(s)). If there's a timeline for the file's deletion: 1. Label the issue as ~wontfix 1. Remove the ~OKR label 1. Add a comment to the issue explaining why/pointing to the discussion about the file's pending removal. 1. Unassign yourself from the issue 1. Leave the issue _open_! 1. You're done! If there's no timeline for the file's deletion, then it's worth migrating now. Replace ad hoc HTML spinner markup with [`loadingIconForLegacyJS`](https://gitlab.com/gitlab-org/gitlab/-/blob/1449d62be02e77d30a0f99f141db01d0a422100f/app/assets/javascripts/loading_icon_for_legacy_js.js). See below for examples of what to do, or [an existing MR](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/81552). First, import `loadingIconForLegacyJS`: ```diff +import { loadingIconForLegacyJS } from '~/loading_icon_for_legacy_js'; ``` If the existing spinner is added via `innerHTML`, you can empty the element with `textContent` first, and then use `appendChild`: ```diff -element.innerHTML = '<div class="spinner"></div>'; +element.textContent = ''; +element.appendChild(loadingIconForLegacyJS()); ``` If the existing spinner is added using jQuery, consider using native DOM APIs instead: ```diff -$element.html('<div class="spinner"></div>'); +element.textContent = ''; +element.appendChild(loadingIconForLegacyJS()); ``` It may be that you cannot use a DOM node and _must_ use a string template. This might be the case if the file is using some library that takes HTML templates. In that case, use `loadingIconForLegacyJS().outerHTML`: ```diff -const LOADING_SPINNER_TEMPLATE = '<div class="spinner"></div>'; +const LOADING_SPINNER_TEMPLATE = loadingIconForLegacyJS().outerHTML; ``` ### Configuring the spinner The spinner may need to be configured to look correct for its context. Use the `inline`, `size`, `classes` and `color` arguments. Some examples: ```javascript // Inline spinner loadingIconForLegacyJS({ inline: true }); // Extra large spinner loadingIconForLegacyJS({ size: 'xl' }); // Light spinner (rarely used) loadingIconForLegacyJS({ color: 'light' }); // Spinner with vertical margins loadingIconForLegacyJS({ classes: ['gl-my-3'] }); ``` Use the guidelines in https://design.gitlab.com/components/spinner and your judgement for how to configure the spinner. If in doubt, `@mention` a [Foundations team member](https://about.gitlab.com/company/team/?department=ecosystem-foundations-team) for guidance.