✨ - Updates UI loading component

Author: claudiocoder

__test__/_app/Loading.test.tsx

@@ -1,5 +1,5 @@
 import { expect, it, describe } from 'vitest'
-import { render, screen } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import Loading from '../../src/app/loading'
 
 describe('Loading', () => {
@@ -8,7 +8,7 @@ describe('Loading', () => {
     expect(component).toBeDefined()
   })
   it('should display loading label', () => {
-    render(<Loading />)
-    expect(screen.getByText('Loading...')).toBeTruthy()
+    const { container } = render(<Loading />)
+    expect(container.getElementsByClassName('loader').length).toBe(1)
   })
 })

src/app/loading.tsx

@@ -1,4 +1,8 @@
 export default function Loading() {
   // You can add any UI inside Loading, including a Skeleton.
-  return <div>Loading...</div>
+  return (
+    <div className='w-full h-[90vh] flex items-center justify-center'>
+      <span className='loader'></span>
+    </div>
+  )
 }

src/styles/globals.css

@@ -1,3 +1,37 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 3px solid #1a1a1a;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+.loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 3px solid;
+  border-color: #1a1a1a transparent;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}