From e55401ecd968cc82f8d08afe59f556598241dcdb Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Tue, 2 Sep 2025 16:04:41 +0100
Subject: [PATCH] fix(ui): add loader sizes

---
 .../ui/src/components/Loader/Loader.module.css     | 14 +++++++++++++-
 .../ui/src/components/Loader/Loader.stories.tsx    | 10 +++++++++-
 pkgs/clan-app/ui/src/components/Loader/Loader.tsx  |  8 ++++++++
 .../ui/src/workflows/AddMachine/StepProgress.tsx   |  2 +-
 4 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/Loader/Loader.module.css b/pkgs/clan-app/ui/src/components/Loader/Loader.module.css
index 068163192..3ff796fb4 100644
--- a/pkgs/clan-app/ui/src/components/Loader/Loader.module.css
+++ b/pkgs/clan-app/ui/src/components/Loader/Loader.module.css
@@ -1,6 +1,6 @@
 .loader {
   @apply relative;
-  @apply w-4 h-4;
+  @apply size-full;
 
   &.primary {
     & > div.wrapper > div.parent,
@@ -15,6 +15,18 @@
       background: #0051ff;
     }
   }
+
+  &.sizeDefault {
+    @apply size-4;
+  }
+
+  &.sizeLarge {
+    @apply size-8;
+  }
+
+  &.sizeExtraLarge {
+    @apply size-12;
+  }
 }
 
 .wrapper {
diff --git a/pkgs/clan-app/ui/src/components/Loader/Loader.stories.tsx b/pkgs/clan-app/ui/src/components/Loader/Loader.stories.tsx
index 92256e43c..4b665cedf 100644
--- a/pkgs/clan-app/ui/src/components/Loader/Loader.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/Loader/Loader.stories.tsx
@@ -1,9 +1,17 @@
 import type { Meta, StoryObj } from "@kachurun/storybook-solid";
 import { Loader, LoaderProps } from "@/src/components/Loader/Loader";
 
+const LoaderExamples = (props: LoaderProps) => (
+  <div class="grid grid-cols-8">
+    <Loader {...props} size="default" />
+    <Loader {...props} size="l" />
+    <Loader {...props} size="xl" />
+  </div>
+);
+
 const meta: Meta<LoaderProps> = {
   title: "Components/Loader",
-  component: Loader,
+  component: LoaderExamples,
 };
 
 export default meta;
diff --git a/pkgs/clan-app/ui/src/components/Loader/Loader.tsx b/pkgs/clan-app/ui/src/components/Loader/Loader.tsx
index c47dd2c1e..70044074e 100644
--- a/pkgs/clan-app/ui/src/components/Loader/Loader.tsx
+++ b/pkgs/clan-app/ui/src/components/Loader/Loader.tsx
@@ -7,15 +7,23 @@ export type Hierarchy = "primary" | "secondary";
 export interface LoaderProps {
   hierarchy?: Hierarchy;
   class?: string;
+  size?: "default" | "l" | "xl";
 }
 
 export const Loader = (props: LoaderProps) => {
+  const size = () => props.size || "default";
+
   return (
     <div
       class={cx(
         styles.loader,
         styles[props.hierarchy || "primary"],
         props.class,
+        {
+          [styles.sizeDefault]: size() === "default",
+          [styles.sizeLarge]: size() === "l",
+          [styles.sizeExtraLarge]: size() === "xl",
+        },
       )}
     >
       <div class={styles.wrapper}>
diff --git a/pkgs/clan-app/ui/src/workflows/AddMachine/StepProgress.tsx b/pkgs/clan-app/ui/src/workflows/AddMachine/StepProgress.tsx
index 222dec3f2..8e03866fb 100644
--- a/pkgs/clan-app/ui/src/workflows/AddMachine/StepProgress.tsx
+++ b/pkgs/clan-app/ui/src/workflows/AddMachine/StepProgress.tsx
@@ -22,7 +22,7 @@ export const StepProgress = (props: StepProgressProps) => {
         when={store.error}
         fallback={
           <>
-            <Loader class="size-8" />
+            <Loader size="l" />
             <Typography hierarchy="body" size="s" weight="medium" family="mono">
               {store.general?.name} is being created
             </Typography>