fix: renamed Spinner -> Loading

packages/design-system/lib/components/Loading/Loading.tsx

@@ -0,0 +1,34 @@
+import styles from './loading.module.css'
+import { VariantProps } from 'class-variance-authority'
+
+import { variants } from './variants'
+
+export interface LoadingProps extends VariantProps<typeof variants> {
+  size?: number
+}
+
+export function Loading({ type, size = 20 }: LoadingProps) {
+  const classNames = variants({
+    type,
+  })
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 20 21"
+      fill="none"
+      className={classNames}
+    >
+      <circle className={styles.dot} cx="10" cy="2.64147" r="1.73913" />
+      <circle className={styles.dot} cx="16.087" cy="5.25018" r="1.73913" />
+      <circle className={styles.dot} cx="18.2609" cy="10.9023" r="1.73913" />
+      <circle className={styles.dot} cx="16.087" cy="16.5545" r="1.73913" />
+      <circle className={styles.dot} cx="10" cy="19.1632" r="1.73913" />
+      <circle className={styles.dot} cx="3.91304" cy="16.5545" r="1.73913" />
+      <circle className={styles.dot} cx="1.73913" cy="10.9023" r="1.73913" />
+      <circle className={styles.dot} cx="3.91304" cy="5.25018" r="1.73913" />
+    </svg>
+  )
+}