Problem

The Mismatch Finder's user interface was composed using a combination of WiKit components and mixins, such as wikit-Progress (see source). The WiKit design system is now on its deprecation path, as it has been superseded by Codex, the official Wikimedia design system. The utilization of WiKit elements is not recommended, and they should be replaced in order to reduce maintenance costs and ensure consistency.

Solution

We have to replace the instance of wikit-Progress used to indicate the loading of the Mismatch Finder's results page with the Codex equivalent: cdx-progress-bar (See demo). This will take us a step closer to switching to the new design system and deprecating the old.

Current	New

Considerations

• The progress bar needs to be displayed on top of an overlay that has the same styling as the backdrop included in the Codex Dialog component (.cdx-dialog-backdrop). Codex doesn't offer this overlay as part of the Progress component yet (see T350805). So we'll have to recreate it using the specified tokens and styles.

• We are not using the Inline variant of the Codex progress bar here because the guidelines indicate it should be utilized within components and not at page/area level (see recommendations).

Acceptance criteria

• The WiKit Inline progress bar is replaced by the Codex Indeterminate Progress bar component