From 0e3f48c8ba131ae51ae26ee6052485e0e6fdbc90 Mon Sep 17 00:00:00 2001
From: Vass Bence <49574140+vassbence@users.noreply.github.com>
Date: Thu, 1 Aug 2024 13:16:04 +0200
Subject: [PATCH] feat(loader): add missing wrapper comp

---
 src/components/Loader/index.tsx | 156 ++++++++++++++++++--------------
 1 file changed, 90 insertions(+), 66 deletions(-)

diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx
index 620cd9e..3709972 100644
--- a/src/components/Loader/index.tsx
+++ b/src/components/Loader/index.tsx
@@ -15,83 +15,107 @@ function Loader({ value, color = 'neutral' }: LoaderProps) {
 
   if (infinite) {
     return (
+      <div
+        style={{
+          display: 'inline-flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: 24,
+          width: 24,
+        }}
+      >
+        <svg
+          fill="none"
+          viewBox="0 0 100 100"
+          style={{ width: 16, height: 16 }}
+        >
+          <defs>
+            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop
+                offset="0%"
+                stopColor={color === 'red' ? colors.red100 : colors.neutral100}
+                stopOpacity="0"
+              />
+              <stop
+                offset="50%"
+                stopColor={color === 'red' ? colors.red100 : colors.neutral100}
+                stopOpacity="0.4"
+              />
+              <stop
+                offset="100%"
+                stopColor={color === 'red' ? colors.red100 : colors.neutral100}
+                stopOpacity="1"
+              />
+            </linearGradient>
+          </defs>
+          <styled.circle
+            cx={50}
+            cy={50}
+            r={45}
+            style={{
+              transformOrigin: '50px 50px',
+              stroke: 'url(#gradient)',
+              strokeWidth: 10,
+              strokeDasharray: `${(2 / 3) * 100 * ((45 * 2 * Math.PI) / 100)} ${45 * 2 * Math.PI}`,
+              strokeLinecap: 'round',
+              '@keyframes': {
+                '0%': {
+                  transform: 'rotate(270deg)',
+                  animationTimingFunction: 'ease-in',
+                },
+                '50%': {
+                  transform: 'rotate(90deg)',
+                  animationTimingFunction: 'ease-out',
+                },
+                to: {
+                  transform: 'rotate(-90deg)',
+                },
+              },
+              animationIterationCount: 'infinite',
+              animationDuration: '1s',
+            }}
+          />
+        </svg>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      style={{
+        display: 'inline-flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 24,
+        width: 24,
+      }}
+    >
       <svg fill="none" viewBox="0 0 100 100" style={{ width: 16, height: 16 }}>
-        <defs>
-          <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop
-              offset="0%"
-              stopColor={color === 'red' ? colors.red100 : colors.neutral100}
-              stopOpacity="0"
-            />
-            <stop
-              offset="50%"
-              stopColor={color === 'red' ? colors.red100 : colors.neutral100}
-              stopOpacity="0.4"
-            />
-            <stop
-              offset="100%"
-              stopColor={color === 'red' ? colors.red100 : colors.neutral100}
-              stopOpacity="1"
-            />
-          </linearGradient>
-        </defs>
-        <styled.circle
+        <circle
           cx={50}
           cy={50}
           r={45}
           style={{
+            stroke: color === 'red' ? colors.red20 : colors.neutral20,
+            strokeWidth: 10,
+          }}
+        />
+        <circle
+          cx={50}
+          cy={50}
+          r={45}
+          style={{
+            transform: 'rotate(-90deg)',
             transformOrigin: '50px 50px',
-            stroke: 'url(#gradient)',
+            stroke: color === 'red' ? colors.red100 : colors.neutral100,
             strokeWidth: 10,
-            strokeDasharray: `${(2 / 3) * 100 * ((45 * 2 * Math.PI) / 100)} ${45 * 2 * Math.PI}`,
+            strokeDasharray: `${value * ((45 * 2 * Math.PI) / 100)} ${45 * 2 * Math.PI}`,
+            transition: 'all 250ms ease',
             strokeLinecap: 'round',
-            '@keyframes': {
-              '0%': {
-                transform: 'rotate(270deg)',
-                animationTimingFunction: 'ease-in',
-              },
-              '50%': {
-                transform: 'rotate(90deg)',
-                animationTimingFunction: 'ease-out',
-              },
-              to: {
-                transform: 'rotate(-90deg)',
-              },
-            },
-            animationIterationCount: 'infinite',
-            animationDuration: '1s',
           }}
         />
       </svg>
-    )
-  }
-
-  return (
-    <svg fill="none" viewBox="0 0 100 100" style={{ width: 16, height: 16 }}>
-      <circle
-        cx={50}
-        cy={50}
-        r={45}
-        style={{
-          stroke: color === 'red' ? colors.red20 : colors.neutral20,
-          strokeWidth: 10,
-        }}
-      />
-      <circle
-        cx={50}
-        cy={50}
-        r={45}
-        style={{
-          transform: 'rotate(-90deg)',
-          transformOrigin: '50px 50px',
-          stroke: color === 'red' ? colors.red100 : colors.neutral100,
-          strokeWidth: 10,
-          strokeDasharray: `${value * ((45 * 2 * Math.PI) / 100)} ${45 * 2 * Math.PI}`,
-          transition: 'all 250ms ease',
-          strokeLinecap: 'round',
-        }}
-      />
-    </svg>
+    </div>
   )
 }