From a39e7df0696cffb3c41e197d143200ea81e6b2dc Mon Sep 17 00:00:00 2001
From: spacemeowx2 <spacemeowx2@gmail.com>
Date: Fri, 3 Mar 2023 22:29:46 +0800
Subject: [PATCH] feat: add Loading component

---
 gui/package.json               |  1 +
 gui/pnpm-lock.yaml             | 10 ++++++++++
 gui/src/components/Loading.tsx |  9 +++++++++
 gui/src/pages/Home.tsx         |  3 ++-
 4 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 gui/src/components/Loading.tsx

diff --git a/gui/package.json b/gui/package.json
index df6a522..5bda570 100644
--- a/gui/package.json
+++ b/gui/package.json
@@ -13,6 +13,7 @@
     "@tauri-apps/api": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
     "react-router-dom": "^6.8.2"
   },
   "devDependencies": {
diff --git a/gui/pnpm-lock.yaml b/gui/pnpm-lock.yaml
index f64e8d2..c2b5f39 100644
--- a/gui/pnpm-lock.yaml
+++ b/gui/pnpm-lock.yaml
@@ -11,6 +11,7 @@ specifiers:
   postcss: ^8.4.21
   react: ^18.2.0
   react-dom: ^18.2.0
+  react-icons: ^4.8.0
   react-router-dom: ^6.8.2
   tailwindcss: ^3.2.7
   typescript: ^4.9.5
@@ -21,6 +22,7 @@ dependencies:
   '@tauri-apps/api': 1.2.0
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
+  react-icons: 4.8.0_react@18.2.0
   react-router-dom: 6.8.2_biqbaboplfbrettd7655fr4n2y
 
 devDependencies:
@@ -1191,6 +1193,14 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-icons/4.8.0_react@18.2.0:
+    resolution: {integrity: sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-refresh/0.14.0:
     resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
     engines: {node: '>=0.10.0'}
diff --git a/gui/src/components/Loading.tsx b/gui/src/components/Loading.tsx
new file mode 100644
index 0000000..5a090a2
--- /dev/null
+++ b/gui/src/components/Loading.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import { AiOutlineLoading3Quarters } from 'react-icons/ai';
+
+type LoadingProps = {
+}
+
+export const Loading: React.FC<LoadingProps> = ({ }) => {
+  return <AiOutlineLoading3Quarters className='animate-spin my-2 mx-auto' />
+}
diff --git a/gui/src/pages/Home.tsx b/gui/src/pages/Home.tsx
index 1f2efc8..b788ce9 100644
--- a/gui/src/pages/Home.tsx
+++ b/gui/src/pages/Home.tsx
@@ -1,7 +1,8 @@
+import { Loading } from 'components/Loading'
 import React from 'react'
 
 export const Home: React.FC = ({ }) => {
   return <>
-    Hello world!
+    Hello world!  <Loading />
   </>
 }
\ No newline at end of file