Fixed spinner visibility in Share Profile copy button

[abdultalha0862]

Description

Brief summary of changes:
Fixed spinner color contrast issue in the Share Profile copy button where the LoadingIndicator was barely visible across different background modes. Added a helper function to ensure optimal spinner color selection based on actual button styling.

Related issue(s):
Fixes #24706

Type of change:

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Code refactoring
• Performance improvement
• UI/UX improvement

Testing

How has this been tested?

• Manual testing
• Unit tests
• Integration tests
• End-to-end tests

Test environment:

• Ghost version: Development (latest main)
• Node.js version: 18+
• Database (MySQL/SQLite): Both tested
• Browser (if applicable): Chrome, Firefox

Screenshots (if applicable)

Before:

• Light mode: Black spinner on dark button (invisible)
• Dark mode: White spinner on white button (invisible)
• Accent mode: Inconsistent spinner visibility

After:

• Light mode: ✅ White spinner on dark button (clearly visible)
• Dark mode: ✅ Black spinner on white button (clearly visible)
• Accent mode: ✅ White spinner on dark button (clearly visible)

Technical Implementation

Added getSpinnerColorForButton() helper function:

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';
    }
};

[coderabbitai]

Walkthrough

A new helper getSpinnerColorForButton(backgroundColor) was added and used in apps/admin-x-activitypub/src/views/Preferences/components/Profile.tsx. The helper maps button background themes to spinner colors (light → light, dark → dark, accent → light, default → dark). The "Copy image" button's loading state now passes the current backgroundColor to LoadingIndicator so the spinner color is computed dynamically instead of being fixed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title clearly and concisely describes the primary change of improving spinner visibility in the Share Profile copy button, matching the main focus of the pull request.
Linked Issues Check	✅ Passed	The implementation fulfills the objectives of issue #24706 by dynamically selecting spinner colors to ensure visibility across light, dark, and accent button variants and confirming functionality in the specified environments.
Out of Scope Changes Check	✅ Passed	All code modifications are confined to the spinner color logic within the Profile component’s copy button, with no unrelated or extraneous changes beyond the scope of the linked issue.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Description Check	✅ Passed	The provided pull request description directly addresses the spinner color contrast issue by summarizing the added helper function, referencing the related issue, listing test environments and expected before/after behavior, and clearly aligns with the raw summary and PR objectives. It is appropriately focused on the actual changes and their intent.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/admin-x-activitypub/src/views/Preferences/components/Profile.tsx (1)

40-56: LGTM! Clear mapping logic.

The helper function correctly maps each backgroundColor theme to the appropriate spinner color, ensuring visibility against the button background. The inline comments clearly explain the visual result for each case, and the switch statement with a default case is a solid approach.

Consider adding unit tests for this helper to document the expected behavior:

describe('getSpinnerColorForButton', () => {
  it('returns light spinner for light theme (dark button)', () => {
    expect(getSpinnerColorForButton('light')).toBe('light');
  });
  
  it('returns dark spinner for dark theme (white button)', () => {
    expect(getSpinnerColorForButton('dark')).toBe('dark');
  });
  
  it('returns light spinner for accent theme (dark button)', () => {
    expect(getSpinnerColorForButton('accent')).toBe('light');
  });
});

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fb4f057 and 1dd0ed5.

📒 Files selected for processing (1)

• apps/admin-x-activitypub/src/views/Preferences/components/Profile.tsx (2 hunks)

🔇 Additional comments (1)

apps/admin-x-activitypub/src/views/Preferences/components/Profile.tsx (1)

380-385: LGTM! Fixes spinner visibility correctly.

The LoadingIndicator now receives a dynamic color based on the button's background theme, ensuring the spinner is visible in all modes (light/dark/accent). The implementation directly addresses the contrast issue described in #24706.