From 335333935bb4b25cb8ab41c5da0454f4afbd165b Mon Sep 17 00:00:00 2001
From: Lncvrt <lncvrtreal@gmail.com>
Date: Fri, 3 Jan 2025 14:47:00 -0700
Subject: [PATCH] Loading screen tweaks

---
 src/App.css            | 28 ++++++++++++++++++++++++----
 src/App.tsx            |  4 +---
 src/Loading.tsx        |  8 +++-----
 src/UpdateRequired.tsx |  4 +---
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/App.css b/src/App.css
index e017e89..31c2919 100644
--- a/src/App.css
+++ b/src/App.css
@@ -26,7 +26,6 @@ img:hover {
   margin: 2px;
 }
 
-/* Container for the dropdown */
 .dropdown-container {
   display: flex;
   justify-content: center;
@@ -34,7 +33,6 @@ img:hover {
   padding: 10px;
 }
 
-/* Styling the dropdown itself */
 .dropdown {
   font-size: 16px;
   padding: 8px;
@@ -44,14 +42,36 @@ img:hover {
   transition: background-color 0.3s ease;
 }
 
-/* Change background color when hovered */
 .dropdown:hover {
   background-color: #222222;
 }
 
-/* Option styling */
 .dropdown option {
   font-size: 16px;
   padding: 8px;
   background-color: #1e1e1e;
 }
+
+.loader {
+  width: 80px;
+  height: 80px;
+  border: 5px solid #f3f3f3;
+  border-top: 5px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 6b27a0a..0752dd7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 
-function App() {
+export default function App() {
   const [result, setResult] = useState(false);
   const [selectedVersion, setSelectedVersion] = useState<number>(0);
 
@@ -42,5 +42,3 @@ function App() {
     </main>
   );
 }
-
-export default App;
diff --git a/src/Loading.tsx b/src/Loading.tsx
index a099997..341a54f 100644
--- a/src/Loading.tsx
+++ b/src/Loading.tsx
@@ -1,9 +1,7 @@
-function Loading() {
+export default function Loading() {
   return (
-    <main className="container">
-      <p>loading</p>
+    <main className="container center">
+      <div className="loader"></div>
     </main>
   );
 }
-
-export default Loading;
diff --git a/src/UpdateRequired.tsx b/src/UpdateRequired.tsx
index cc16649..3344a93 100644
--- a/src/UpdateRequired.tsx
+++ b/src/UpdateRequired.tsx
@@ -1,4 +1,4 @@
-function UpdateRequired() {
+export default function UpdateRequired() {
   return (
     <main className="container">
       <p>update required</p>
@@ -6,5 +6,3 @@ function UpdateRequired() {
     </main>
   );
 }
-
-export default UpdateRequired;