From 1ecf220941550bd3bf0a76a8bfbe394c539cef7f Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Tue, 19 Sep 2023 01:18:18 +0800
Subject: [PATCH] Frontend added loading when fetching shorteners

---
 react-frontend/bun.lockb   | Bin 132880 -> 132880 bytes
 react-frontend/src/App.tsx |  23 +++++++++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/react-frontend/bun.lockb b/react-frontend/bun.lockb
index e791da64eb7584db0c1174228e2495447c2cccc8..8bc16a53a306b5fa2702ef6d5476e45743785b10 100755
GIT binary patch
delta 144
zcmbQx$1$OgW5W%R$rV)=n*~I9t|qPuWq<<#CMFXY2PPaj#if%HF{aHEU;SpDJmHnd
Y=AL)&)7cs04D}54Otv?LG4^c$0Fi<oI{*Lx

delta 166
zcmbQx$1$OgW5W#*(G8hKby>^|3``6VP|C)@5HR_!xbkKJQJ$-bAgS3<senkMIuH{i
oCI=O}c{}YgC1OmQC%*d4JbA(^k<C5t-lwxeow2<sjInP60EVn4uK)l5

diff --git a/react-frontend/src/App.tsx b/react-frontend/src/App.tsx
index 64d2de5..45bbef3 100644
--- a/react-frontend/src/App.tsx
+++ b/react-frontend/src/App.tsx
@@ -25,7 +25,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Toaster } from '@/components/ui/toaster'
 import { useToast } from '@/components/ui/use-toast'
 
-import { Copy } from 'lucide-react'
+import { Copy, Loader2 } from 'lucide-react'
 
 import { useEffect, useState } from 'react'
 
@@ -40,8 +40,10 @@ type Shortener = {
 
 export default function App() {
 	const [shorteners, setShorteners] = useState<Shortener[]>([])
+	const [isLoading, setIsLoading] = useState<boolean>(false)
 
 	const getShorteners = async () => {
+		setIsLoading(true)
 		const response = await fetch(backend_url + '/link', {
 			method: 'GET',
 		})
@@ -49,6 +51,7 @@ export default function App() {
 		const data = (await response.json()).shorteners as Shortener[]
 
 		setShorteners(data)
+		setIsLoading(false)
 	}
 
 	useEffect(() => {
@@ -64,7 +67,10 @@ export default function App() {
 			<Navbar getShorteners={getShorteners} />
 			<div className='flex justify-center px-2 pt-8'>
 				<div className='w-full max-w-6xl'>
-					<ShortenerTable shorteners={shorteners} />
+					<ShortenerTable
+						shorteners={shorteners}
+						isLoading={isLoading}
+					/>
 				</div>
 			</div>
 			<Toaster />
@@ -146,7 +152,13 @@ const CreateShortener = ({
 	)
 }
 
-const ShortenerTable = ({ shorteners }: { shorteners: Shortener[] }) => {
+const ShortenerTable = ({
+	shorteners,
+	isLoading,
+}: {
+	shorteners: Shortener[]
+	isLoading: boolean
+}) => {
 	const { toast } = useToast()
 	const copyLinkToClipboard = async (code: string) => {
 		await navigator.clipboard.writeText(backend_url + '/' + code)
@@ -158,7 +170,10 @@ const ShortenerTable = ({ shorteners }: { shorteners: Shortener[] }) => {
 	return (
 		<Card>
 			<CardHeader>
-				<CardTitle>Shorteners</CardTitle>
+				<CardTitle className='flex gap-2'>
+					<div>Shorteners</div>
+					{isLoading && <Loader2 className='animate-spin'></Loader2>}
+				</CardTitle>
 			</CardHeader>
 			<CardContent>
 				<Table>