✨(react) improve loader

Add small size to the loader for the file uploader.

packages/react/src/components/Loader/index.scss

@@ -1,23 +1,50 @@
 .c__loader {
-  width: 48px;
-  height: 48px;
   border-radius: 50%;
   position: relative;
-  animation: rotate 1s linear infinite
-}
-.c__loader::before , .c__loader::after {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  border: 5px solid var(--c--theme--colors--primary-700);
-  animation: prixClipFix 2s linear infinite ;
-}
-.c__loader::after{
-  border-color: var(--c--theme--colors--primary-400);
-  animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
-  inset: 6px;
+  animation: rotate 1s linear infinite;
+
+  &::before,
+  &::after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border-style: solid;
+    border-color: var(--c--theme--colors--primary-700);
+    animation: prixClipFix 2s linear infinite;
+  }
+
+  &::after {
+    border-color: var(--c--theme--colors--primary-400);
+    animation: prixClipFix 2s linear infinite,
+      rotate 0.5s linear infinite reverse;
+    inset: 6px;
+  }
+
+  span {
+    display: none;
+  }
+
+  &--small {
+    width: 24px;
+    height: 24px;
+
+    &::before,
+    &::after {
+      border-width: 2px;
+    }
+  }
+
+  &--medium {
+    width: 48px;
+    height: 48px;
+
+    &::before,
+    &::after {
+      border-width: 5px;
+    }
+  }
 }
 
 @keyframes rotate {

packages/react/src/components/Loader/index.stories.tsx

@@ -1,5 +1,4 @@
-import { Meta, StoryFn } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Loader } from ":/components/Loader/index";
 
 export default {
@@ -7,9 +6,14 @@ export default {
   component: Loader,
 } as Meta<typeof Loader>;
 
-const Template: StoryFn<typeof Loader> = () => <Loader />;
+type Story = StoryObj<typeof Loader>;
 
-export const Default = {
-  render: Template,
+export const Medium: Story = {
   args: {},
 };
+
+export const Small: Story = {
+  args: {
+    size: "small",
+  },
+};

packages/react/src/components/Loader/index.tsx

@@ -1,9 +1,17 @@
 import React from "react";
+import classNames from "classnames";
 
 interface Props {
   "aria-label"?: string;
+  size?: "small" | "medium";
 }
 
-export const Loader = (props: Props) => {
-  return <div className="c__loader" role="status" {...props} />;
+export const Loader = ({ size = "medium", ...props }: Props) => {
+  return (
+    <div
+      className={classNames("c__loader", "c__loader--" + size)}
+      role="status"
+      {...props}
+    />
+  );
 };