From 0d268f83230304ff8e34ca1d83b18ff665efa457 Mon Sep 17 00:00:00 2001
From: claudiocoder <clauartur98@gmail.com>
Date: Wed, 12 Feb 2025 16:47:44 -0600
Subject: [PATCH 1/3] :sparkles: - Updates UI loading component

---
 src/app/loading.tsx    |  6 +++++-
 src/styles/globals.css | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/app/loading.tsx b/src/app/loading.tsx
index e158f17..aab48a5 100644
--- a/src/app/loading.tsx
+++ b/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>
+  )
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b5c61c9..95c336a 100644
--- a/src/styles/globals.css
+++ b/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);
+  }
+}

From fba28987afe8efefa4198b20bf6fd83e0c78050a Mon Sep 17 00:00:00 2001
From: claudiocoder <clauartur98@gmail.com>
Date: Wed, 12 Feb 2025 16:48:43 -0600
Subject: [PATCH 2/3] :sparkles: - Updates UI loading component

---
 src/app/loading.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/loading.tsx b/src/app/loading.tsx
index aab48a5..ce2765c 100644
--- a/src/app/loading.tsx
+++ b/src/app/loading.tsx
@@ -1,8 +1,8 @@
 export default function Loading() {
   // You can add any UI inside Loading, including a Skeleton.
   return (
-    <div className="w-full h-[90vh] flex items-center justify-center">
-      <span className="loader"></span>
+    <div className='w-full h-[90vh] flex items-center justify-center'>
+      <span className='loader'></span>
     </div>
   )
 }

From 13d2a6cefe58923e832580faf634061457a6584c Mon Sep 17 00:00:00 2001
From: claudiocoder <clauartur98@gmail.com>
Date: Wed, 12 Feb 2025 17:10:40 -0600
Subject: [PATCH 3/3] :sparkles: - Updates UI loading component

---
 __test__/_app/Loading.test.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/__test__/_app/Loading.test.tsx b/__test__/_app/Loading.test.tsx
index 13e45ad..34aa39c 100644
--- a/__test__/_app/Loading.test.tsx
+++ b/__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)
   })
 })