Merge pull request 'fix(ui): add loader sizes' (#5067) from ui/fix-loader-scaling into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5067

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 {

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;

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

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>