remove default cypress tests, improve loading ui

app/page.tsx

@@ -1,8 +1,10 @@
 "use client"
 
 import { GoogleIcon } from "@/components"
+import { appTitle } from "@/lib/const"
 import { ButtonStatusType } from "@/types/Common"
 import { signIn } from "next-auth/react"
+import Image from "next/image"
 import { useState } from "react"
 
 const LoginPage = () => {
@@ -27,6 +29,14 @@ const LoginPage = () => {
   return (
     <main className="flex min-h-screen flex-col items-center justify-center">
       <div>
+        <div className="mb-10 flex items-center justify-center">
+          <Image
+            alt={appTitle}
+            src="/aws-restart-logo.png"
+            width={120}
+            height={50}
+          />
+        </div>
         <div className="mb-4">
           <h2>Track AWS r/Start Labs 👍🏽</h2>
         </div>

components/UI/Loading/LoadingLabs.tsx

@@ -0,0 +1,19 @@
+const LoadingLabs = () => {
+  const loadingItems = Array.from({ length: 20 }, () => 1)
+  return (
+    <div className="flex animate-pulse">
+      <div className="mt-2 w-full">
+        <ul className="mt-5 space-y-3">
+          {loadingItems.map((_, idx) => (
+            <li
+              key={idx}
+              className="h-10 w-full rounded bg-gray-200 dark:bg-gray-700"
+            ></li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default LoadingLabs

components/UI/Loading/LoadingLogo.tsx

@@ -0,0 +1,12 @@
+import { appTitle } from "@/lib/const"
+import Image from "next/image"
+
+const LoadingLogo = () =>{
+    return (
+        <div className="h-screen flex items-center justify-center animate-bounce">
+            <Image alt={appTitle} src="/aws-restart-logo.png" width={120} height={50} />
+        </div>
+    )
+}
+
+export default LoadingLogo

components/UI/Loading/index.ts

@@ -0,0 +1,4 @@
+import LoadingLabs from "./LoadingLabs"
+import LoadingLogo from "./LoadingLogo"
+
+export { LoadingLabs, LoadingLogo }

components/UI/UserLabs.tsx

@@ -16,6 +16,7 @@ import { ErrorResponse, LabResponseType } from "@/types/Responses"
 import { Session } from "next-auth"
 import Divider from "./Divider"
 import Lab from "./Lab"
+import { LoadingLabs } from "./Loading"
 
 interface UserLabsProps {
   isLoading: LoadingState
@@ -34,7 +35,7 @@ const UserLabs = ({
   userData,
 }: UserLabsProps) => {
   if (isLoading.status === "loading") {
-    return <div>Fetching your labs...</div>
+    return <LoadingLabs />
   }
 
   if (error !== null) {

components/UI/index.ts

@@ -1,5 +1,6 @@
 import Divider from "./Divider"
 import Lab from "./Lab"
+import { LoadingLabs, LoadingLogo } from "./Loading"
 import UserLabs from "./UserLabs"
 
-export { Divider, Lab, UserLabs }
+export { Divider, Lab, LoadingLabs, LoadingLogo, UserLabs }

components/index.ts

@@ -1,4 +1,4 @@
 import { CheckMark, GoogleIcon } from "./Icons"
-import { Divider, UserLabs } from "./UI"
+import { Divider, LoadingLabs, LoadingLogo, UserLabs } from "./UI"
 
-export { CheckMark, Divider, GoogleIcon, UserLabs }
+export { CheckMark, Divider, GoogleIcon, LoadingLabs, LoadingLogo, UserLabs }