From 0e991502fcf04c135e9d8eead852dc7515f330fa Mon Sep 17 00:00:00 2001
From: akash-dabhi-qed <akash.dabhi@qed42.com>
Date: Mon, 13 Apr 2026 16:01:34 +0530
Subject: [PATCH 1/2] fix: now using theme primary color for Loader instead of
 hardcoded hex

---
 .../design-system/src/components/Loader/Loader.tsx  | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/Loader/Loader.tsx b/packages/design-system/src/components/Loader/Loader.tsx
index c71ab812a..72fcc22a1 100644
--- a/packages/design-system/src/components/Loader/Loader.tsx
+++ b/packages/design-system/src/components/Loader/Loader.tsx
@@ -15,7 +15,7 @@ export const Loader = React.forwardRef<HTMLDivElement, LoaderProps>(({ children,
   return (
     <div role="alert" aria-live="assertive" ref={ref} {...props}>
       <VisuallyHidden>{children}</VisuallyHidden>
-      <LoaderImg src={loaderSvg} aria-hidden $small={small} />
+      <LoaderImg aria-hidden $small={small} />
     </div>
   );
 });
@@ -29,7 +29,16 @@ const rotation = keyframes`
   }
 `;
 
-const LoaderImg = styled.img<PropsToTransientProps<Required<Pick<LoaderProps, 'small'>>>>`
+const LoaderImg = styled.div<PropsToTransientProps<Required<Pick<LoaderProps, 'small'>>>>`
+  width: 63px;
+  height: 63px;
+  background-color: ${({ theme }) => theme.colors.primary600};
+  mask-image: url(${loaderSvg});
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-image: url(${loaderSvg});
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
   animation: ${rotation} 1s infinite linear;
   will-change: transform;
   ${({ $small, theme }) => $small && `width: ${theme.spaces[6]}; height: ${theme.spaces[6]};`}

From e35fc2de6c9570d9b2b67a86dc32c68d085b98f8 Mon Sep 17 00:00:00 2001
From: akash-dabhi-qed <akash.dabhi@qed42.com>
Date: Mon, 13 Apr 2026 16:14:12 +0530
Subject: [PATCH 2/2] added custom theme color story to verify Loader fix

---
 docs/stories/04-components/Loader.stories.tsx | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/docs/stories/04-components/Loader.stories.tsx b/docs/stories/04-components/Loader.stories.tsx
index 34ffa5d27..ff79d5833 100644
--- a/docs/stories/04-components/Loader.stories.tsx
+++ b/docs/stories/04-components/Loader.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Loader } from '@strapi/design-system';
+import { DesignSystemProvider, Loader, extendTheme, lightTheme } from '@strapi/design-system';
 import { outdent } from 'outdent';
 
 const meta: Meta<typeof Loader> = {
@@ -38,3 +38,37 @@ export const Small = {
     },
   },
 } satisfies Story;
+
+const customTheme = extendTheme(lightTheme, {
+  colors: {
+    primary600: '#ff0000',
+  },
+});
+
+export const CustomThemeColor = {
+  render: () => (
+    <DesignSystemProvider theme={customTheme}>
+      <Loader>Loading content...</Loader>
+    </DesignSystemProvider>
+  ),
+  name: 'custom theme color',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The spinner respects the `primary600` theme color. Here `primary600` is overridden to red (`#ff0000`) to verify the fix — without it the spinner would always appear purple.',
+      },
+      source: {
+        code: outdent`
+          const customTheme = extendTheme(lightTheme, {
+            colors: { primary600: '#ff0000' },
+          });
+
+          <DesignSystemProvider theme={customTheme}>
+            <Loader>Loading content...</Loader>
+          </DesignSystemProvider>
+        `,
+      },
+    },
+  },
+} satisfies Story;