fix: renamed Spinner -> Loading

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

@@ -1,11 +1,9 @@
 import { Button as ButtonRAC } from 'react-aria-components'
+import { Loading, type LoadingProps } from '../Loading/Loading'
 
 import { variants } from './variants'
-
 import type { ButtonProps } from './types'
-import { Spinner } from '../Spinner'
 import styles from './button.module.css'
-import { SpinnerProps } from '../Spinner/Spinner'
 
 export function Button({
   variant,
@@ -27,17 +25,17 @@ export function Button({
     className,
   })
 
-  let spinnerType: SpinnerProps['type'] = 'Dark'
+  let loadingType: LoadingProps['type'] = 'Dark'
 
   switch (color) {
     case 'Primary':
-      spinnerType = 'Dark'
+      loadingType = 'Dark'
       break
     case 'Inverted':
-      spinnerType = 'White'
+      loadingType = 'White'
       break
     default:
-      spinnerType = 'Dark'
+      loadingType = 'Dark'
   }
 
   return (
@@ -48,7 +46,7 @@ export function Button({
             {children}
             {isPending && (
               <div className={styles.spinnerWrapper}>
-                <Spinner size={20} type={spinnerType} />
+                <Loading size={20} type={loadingType} />
               </div>
             )}
           </>

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

@@ -2,11 +2,11 @@ import 'react-material-symbols/rounded'
 
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { Spinner } from './Spinner'
+import { Loading } from './Loading'
 
-const meta: Meta<typeof Spinner> = {
+const meta: Meta<typeof Loading> = {
-  title: 'Components/Spinner',
+  title: 'Components/Loading',
-  component: Spinner,
+  component: Loading,
   argTypes: {
     type: {
       control: 'text',
@@ -19,7 +19,7 @@ const meta: Meta<typeof Spinner> = {
 
 export default meta
 
-type Story = StoryObj<typeof Spinner>
+type Story = StoryObj<typeof Loading>
 
 export const Dark: Story = {
   args: {

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

@@ -1,13 +1,13 @@
-import styles from './spinner.module.css'
+import styles from './loading.module.css'
 import { VariantProps } from 'class-variance-authority'
 
 import { variants } from './variants'
 
-export interface SpinnerProps extends VariantProps<typeof variants> {
+export interface LoadingProps extends VariantProps<typeof variants> {
   size?: number
 }
 
-export function Spinner({ type, size = 20 }: SpinnerProps) {
+export function Loading({ type, size = 20 }: LoadingProps) {
   const classNames = variants({
     type,
   })

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

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

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

@@ -1,9 +1,9 @@
-.spinner {
+.loading {
   display: inline-block;
 }
 
 .dot {
-  animation: spinnerAnimation 0.8s linear infinite;
+  animation: pulse 0.8s linear infinite;
   transform-origin: center;
 }
 
@@ -40,7 +40,7 @@
   animation-delay: 0s;
 }
 
-@keyframes spinnerAnimation {
+@keyframes pulse {
   0% {
     opacity: 1;
   }

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

@@ -1,6 +1,6 @@
 import { cva } from 'class-variance-authority'
 
-import styles from './spinner.module.css'
+import styles from './loading.module.css'
 
 export const config = {
   variants: {
@@ -14,4 +14,4 @@ export const config = {
   },
 } as const
 
-export const variants = cva(styles.spinner, config)
+export const variants = cva(styles.loading, config)

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

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