From d7a4f3946c69f81fbe42152ac3d46b39463d2ac5 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 4 Feb 2025 17:51:52 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(front)=20add=20Loader=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This component will be used for various purpose.
---
 src/frontend/panda.config.ts           | 26 +++++++++++++++
 src/frontend/src/primitives/Loader.tsx | 45 ++++++++++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 src/frontend/src/primitives/Loader.tsx

diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index c010e96c..f66633d5 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -121,6 +121,32 @@ const config: Config = {
         '50%': { opacity: '0.65' },
         '100%': { opacity: '1' },
       },
+      rotate: {
+        '0%': {
+          transform: 'rotate(0deg)',
+        },
+        '100%': {
+          transform: 'rotate(360deg)',
+        },
+      },
+      prixClipFix: {
+        '0%': {
+          clipPath: 'polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)',
+        },
+        '25%': {
+          clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)',
+        },
+        '50%': {
+          clipPath:
+            'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)',
+        },
+        '75%': {
+          clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)',
+        },
+        '100%': {
+          clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)',
+        },
+      },
     },
     tokens: defineTokens({
       /* we take a few things from the panda preset but for now we clear out some stuff.
diff --git a/src/frontend/src/primitives/Loader.tsx b/src/frontend/src/primitives/Loader.tsx
new file mode 100644
index 00000000..272fc380
--- /dev/null
+++ b/src/frontend/src/primitives/Loader.tsx
@@ -0,0 +1,45 @@
+import { cva } from '@/styled-system/css'
+
+const loader = cva({
+  base: {
+    borderRadius: '50%',
+    position: 'relative',
+    animation: 'rotate 1s linear infinite',
+    '&:before, &:after': {
+      content: '""',
+      boxSizing: 'border-box',
+      position: 'absolute',
+      inset: '0',
+      borderRadius: '50%',
+      borderStyle: 'solid',
+      borderColor: 'white',
+    },
+    _before: {
+      animation: 'prixClipFix 2s linear infinite',
+    },
+    _after: {
+      borderColor: 'white',
+      animation:
+        'prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse',
+      inset: 6,
+    },
+  },
+  variants: {
+    size: {
+      small: {
+        width: '24px',
+        height: '24px',
+        '&:before, &:after': {
+          borderWidth: '2px',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'small',
+  },
+})
+
+export const Loader = () => {
+  return <div className={loader()}></div>
+}