Issue Summary
When using the “Share your profile” feature in Ghost’s Admin panel (under Network → Preferences → Share your profile), the loading spinner that appears when clicking “Copy Image” is either invisible or barely visible.
This issue occurs across all three background modes — Light, Dark, and Accent — because the spinner colour is incorrectly determined based on the page background rather than the button background.
As a result, users get no visible feedback while the image is generating, making the interface feel unresponsive.
What did you expect to happen?
The spinner should be clearly visible against the button background in all display modes (Light, Dark, and Accent), providing users with visual confirmation that the copy action is in progress.
Steps to Reproduce
-
Log in to the Ghost Admin panel.
-
Navigate to Network → Preferences → Share your profile.
-
Select a profile background mode — Light, Dark, or Accent.
-
Click “Copy Image”.
-
Observe that the spinner appears but is either invisible or barely visible, depending on the mode.
| Mode | Button Background | Spinner Color | Visibility |
|---|---|---|---|
| Light | Black | Black |  Barely visible |
| Dark | White | White | Invisible |
| Accent | Black | Black | Barely visible |
Setup Information
Ghost Version: 5.88.2
Node.js Version: 18.19.1
How did you install Ghost? Installed using Ghost-CLI (ghost install) on a self-hosted setup.
Host & Operating System: Ubuntu 22.04 LTS (DigitalOcean droplet, 2GB RAM, 1vCPU)
Database Type: MySQL 8.0.36
Browser & OS Version: Chrome 128.0.6613.119 on Windows 11
Relevant Log / Error Output
No runtime errors or console logs were triggered. The issue is visual, caused by incorrect color logic in Profile.tsx.
Problematic code:
<LoadingIndicator
color={`${backgroundColor === 'dark' ? 'dark' : 'light'}`}
size='sm'
/>
This logic assumes the spinner color should match the page background, but it should actually contrast against the button background.
Proposed Fix
Introduced a helper function that correctly determines the spinner colour based on the button’s background:
const getSpinnerColorForButton = (backgroundColor: 'light' | 'dark' | 'accent') => {
switch (backgroundColor) {
case 'light': return 'light'; // White spinner on dark button
case 'dark': return 'dark'; // Black spinner on white button
case 'accent': return 'light'; // White spinner on dark button
default: return 'dark';
}
};
<LoadingIndicator color={getSpinnerColorForButton(backgroundColor)} size='sm' />
Verification After Fix
| Mode | Expected Spinner | Result |
|---|---|---|
| Light | White spinner |  Visible |
| Dark | Black spinner | Visible |
| Accent | White spinner | Visible |