Use the shared loader component instead of the loading GIF - #138
Merged
Conversation
chippison
force-pushed
the
fix-dark-mode-loading-indicator
branch
2 times, most recently
from
September 6, 2026 22:42
2d3e862 to
b0290dd
Compare
Contributor
Author
|
The PHPstan issues will be fixed by: #140 |
lachiebol
requested changes
Sep 9, 2026
The GIF has no alpha channel, so it painted an opaque white block over whatever was behind it - a white rectangle instead of a spinner in dark mode. The shared loader component draws the same three bars and takes its colour from the surrounding text.
6.0.0 is already released, so the fix needs its own version to reach users.
chippison
force-pushed
the
fix-dark-mode-loading-indicator
branch
from
September 9, 2026 02:34
b0290dd to
39e488f
Compare
Contributor
Author
|
Thanks for this. |
lachiebol
approved these changes
Sep 9, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
DEV-20697
The bug
plugins/Morpheus/images/loading-blue.gifhas no alpha channel — every pixel is opaque, over half of them pure white. So it draws a white block instead of a spinner: a white rectangle in dark mode, and near-invisible bars on a light background.An
<img>renders that opaque white exactly the same way a CSS background does, so every one of these call sites has the bug.The fix
Swap the
<img>for the shared loader component core already exports. Same three bars, same 16×11 size, and it takes its colour from the surrounding text so it reads in both themes.No new markup or CSS — core already styles
.loadingPiwik imgand.loadingPiwik .matomo-loaderidentically, so the swap is visually neutral.Pairing
This is the plugin half of matomo-org/matomo#25110, which fixes core's seven
background-imagerules and the.matomo-loadercolours.Nothing hard-depends on it — the loader component already exists on
6.x-dev, so this works against current core and simply looks better once #25110 lands.One thing to know when reading CI here: plugin CI always builds against plain
6.x-dev, so this repo's run exercises the old loader. The signal that matters is core #25110'sUI-plugins (<Plugin>)check, which runs both halves together.Expect screenshots to need regenerating once #25110 merges — these loading states were previously invisible or an opaque block, and become visible bars.
Checklist
[✔] I have understood, reviewed, and tested all AI outputs before use
[✔] All AI instructions respect security, IP, and privacy rules