ENG-182: Migrate Chakra Spinners to Ant Design Spin

[jpople]

Ticket ENG-182

Description Of Changes

Migrates all standalone Chakra Spinner usages in the admin UI to Ant Design's Spin component. The PageSpinner component in fidesui already wraps Spin internally, so those required no changes.

Chakra-specific props (thickness, speed, emptyColor, color) were dropped as they have no Ant equivalents. Size values were mapped (xl → large, sm → small). The Chakra Spinner theme override in src/theme/index.ts was also removed.

Code Changes

• Replaced ChakraSpinner as Spinner imports with Spin from fidesui in 27 files
• Dropped Chakra-only styling props; mapped size values to Ant equivalents
• Preserved centering behavior in DataUsesForm using a Tailwind flex wrapper
• Removed Chakra Spinner theme config from src/theme/index.ts

Steps to Confirm

1. Navigate to any loading state that previously showed a spinner (e.g. settings pages, consent pages, integrations) — spinner should appear using Ant Design styling
2. Check ScannerLoading during system scan — spinner should display at large size
3. Check the OIDC login redirect page — centered spinner at large size
4. Check the user profile page loading state — spinner visible
5. Check the data uses loading state in the consent modal — spinner should be centered

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • No migrations
• Documentation:
  • No documentation updates required

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Error		Mar 31, 2026 3:33pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		Mar 31, 2026 3:33pm

[claude]

Code Review: ENG-182 — Migrate Chakra Spinners to Ant Design Spin

Overall this is a clean, consistent migration across 25+ files. The mechanical substitution of ChakraSpinner → Spin is correct, the changelog entry is present, and the Chakra theme override for Spinner is correctly removed. A few things worth checking:

---

1. Loss of intentional custom colors

Three locations had non-default spinner colors that carried design intent:

• ScannerLoading.tsx — color="green.300" (custom green, with thickness="4px" and speed="0.65s"). Replaced with a plain <Spin size="large" /> which will render the default Ant Design blue. If the green color was meaningful for the scanner UI flow, this is a visual regression.
• login/[provider].tsx — color="primary" size="xl" → <Spin size="large" />. The OIDC login loading spinner loses the primary brand color.
• user-management/profile/[id].tsx — color="primary.900" → <Spin />. Same issue with brand color.

Worth a quick design check on these three specifically.

---

2. Implicit size change for unsized spinners

The old Chakra theme set defaultProps: { size: "xl" } for all Spinner instances. That override is now removed (correctly, since it was Chakra-specific). However, many of the new <Spin /> calls have no size prop at all, meaning they'll render at Ant Design's default ("default"/medium) size rather than the previous effectively-xl size.

Affected files include CustomFieldsList, ConsentManagementModal, DSRCustomizationModal, ManualProcessingList, PrivacyDeclarationStep, consent/index, consent/privacy-experience/[id], consent/privacy-notices/[id], integrations/[id], privacy-requests/[id], settings/consent/index, settings/domains, settings/email-templates, settings/locations, settings/regulations, Datamap, and others.

If the intention is for all these to become visibly smaller spinners, that's fine — but it should be a conscious decision rather than an accidental side effect. Consider adding size="large" to the ones that were previously relying on the theme default, or confirming that the size reduction is acceptable in each context.

---

3. Minor: wrapper div added in DataUsesForm.tsx

// before
return <Spinner size="sm" alignSelf="center" />;

// after
return (
  <div className="flex justify-center">
    <Spin size="small" />
  </div>
);

The added div wrapper is a reasonable approach to center the spinner, but it introduces an extra DOM node. If the parent is already a flex container, alignSelf="center" on the spinner worked without a wrapper. Not a blocker, just something to be aware of.

---

Overall the migration is solid. The two substantive concerns are the custom color losses and the implicit size downgrade for the majority of spinners.