fix: loader improvements

components/Loader/Loader.module.css

@@ -1,39 +0,0 @@
-@keyframes progressSpinnerRotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes progressSpinnerDash {
-  0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -35px;
-  }
-  100% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -124px;
-  }
-}
-
-.progressSpinnerSvg {
-  animation: progressSpinnerRotate 2s linear infinite;
-  height: 100%;
-  transform-origin: center center;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-}
-.progressSpinnerCircle {
-  stroke-dasharray: 89, 200;
-  stroke-dashoffset: 0;
-  stroke: #ffd800;
-  animation: progressSpinnerDash 1.5s ease-in-out infinite;
-  stroke-linecap: round;
-}

components/Loader/Loader.tsx

@@ -1,33 +0,0 @@
-import styles from './Loader.module.css'
-
-export interface LoaderProps {
-  width?: number
-  height?: number
-  className?: string
-}
-
-export const Loader = (props: LoaderProps): JSX.Element => {
-  const { width = 50, height = 50, className } = props
-
-  return (
-    <div className={className}>
-      <div
-        data-cy='progress-spinner'
-        className='relative mx-auto my-0 before:block before:pt-[100%] before:content-none'
-        style={{ width: `${width}px`, height: `${height}px` }}
-      >
-        <svg className={styles['progressSpinnerSvg']} viewBox='25 25 50 50'>
-          <circle
-            className={styles['progressSpinnerCircle']}
-            cx='50'
-            cy='50'
-            r='20'
-            fill='none'
-            strokeWidth='2'
-            strokeMiterlimit='10'
-          />
-        </svg>
-      </div>
-    </div>
-  )
-}

components/design/Loader.tsx

@@ -0,0 +1,28 @@
+import classNames from 'clsx'
+
+export interface LoaderProps {
+  width?: number
+  height?: number
+  className?: string
+}
+
+export const Loader = (props: LoaderProps): JSX.Element => {
+  const { width = 50, height = 50, className } = props
+
+  return (
+    <div
+      style={{
+        width,
+        height
+      }}
+      className={classNames(
+        'animate-spin inline-block border-[3px] border-current border-t-transparent text-yellow dark:text-yellow-dark rounded-full',
+        className
+      )}
+      role='status'
+      aria-label='loading'
+    >
+      <span className='sr-only'>Loading...</span>
+    </div>
+  )
+}