fix: renamed Spinner -> Loading

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

@@ -0,0 +1,41 @@
+import 'react-material-symbols/rounded'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Loading } from './Loading'
+
+const meta: Meta<typeof Loading> = {
+  title: 'Components/Loading',
+  component: Loading,
+  argTypes: {
+    type: {
+      control: 'text',
+    },
+    size: {
+      control: 'number',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Loading>
+
+export const Dark: Story = {
+  args: {
+    type: 'Dark',
+    size: 40,
+  },
+}
+
+export const White: Story = {
+  args: {
+    type: 'White',
+    size: 40,
+  },
+  parameters: {
+    backgrounds: {
+      default: 'Scandic Primary Dark',
+    },
+  },
+}

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

packages/design-system/lib/components/Loading/index.ts

@@ -0,0 +1 @@
+export { Loading } from './Loading'

packages/design-system/lib/components/Loading/loading.module.css

@@ -0,0 +1,50 @@
+.loading {
+  display: inline-block;
+}
+
+.dot {
+  animation: pulse 0.8s linear infinite;
+  transform-origin: center;
+}
+
+.dark .dot {
+  fill: var(--Icon-Interactive-Default);
+}
+
+.white .dot {
+  fill: var(--Icon-Inverted);
+}
+
+.dot:nth-child(1) {
+  animation-delay: -0.7s;
+}
+.dot:nth-child(2) {
+  animation-delay: -0.6s;
+}
+.dot:nth-child(3) {
+  animation-delay: -0.5s;
+}
+.dot:nth-child(4) {
+  animation-delay: -0.4s;
+}
+.dot:nth-child(5) {
+  animation-delay: -0.3s;
+}
+.dot:nth-child(6) {
+  animation-delay: -0.2s;
+}
+.dot:nth-child(7) {
+  animation-delay: -0.1s;
+}
+.dot:nth-child(8) {
+  animation-delay: 0s;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

packages/design-system/lib/components/Loading/variants.ts

@@ -0,0 +1,17 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './loading.module.css'
+
+export const config = {
+  variants: {
+    type: {
+      Dark: styles.dark,
+      White: styles.white,
+    },
+  },
+  defaultVariants: {
+    type: 'Dark',
+  },
+} as const
+
+export const variants = cva(styles.loading, config)