Add github start count spinner

Author: forestream

apps/landing/public/spinner.svg

@@ -0,0 +1,9 @@
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+

apps/landing/src/app/StarButton.css

@@ -1,10 +1,36 @@
+'use client'
+
+import './StarButton.css'
+
 import { Center, css, Flex, Image, Text } from '@devup-ui/react'
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
+
+export default function StarButton() {
+  const [starCount, setStarCount] = useState<number | null>(null)
 
-export default async function StarButton() {
-  const res = await fetch('https://api.github.com/repos/dev-five-git/devup-ui')
-  const data = await res.json()
-  const starCount = data.stargazers_count
+  useEffect(() => {
+    const abortController = new AbortController()
+    const fetchStarCount = async () => {
+      try {
+        const res = await fetch(
+          'https://api.github.com/repos/dev-five-git/devup-ui',
+          {
+            signal: abortController.signal,
+          },
+        )
+        const data = await res.json()
+        setStarCount(data.stargazers_count)
+      } catch (error) {
+        console.error(error)
+      }
+    }
+    fetchStarCount()
+
+    return () => {
+      abortController.abort()
+    }
+  }, [])
 
   return (
     <Link
@@ -58,9 +84,18 @@ export default async function StarButton() {
           h="100%"
           px="16px"
         >
-          <Text color="$primary" textAlign="center" typography="buttonLsemiB">
-            {starCount}
-          </Text>
+          {starCount === null ? (
+            <Image
+              alt="Loading"
+              animation="spin 1s linear infinite"
+              boxSize="20px"
+              src="/spinner.svg"
+            />
+          ) : (
+            <Text color="$primary" textAlign="center" typography="buttonLsemiB">
+              {starCount}
+            </Text>
+          )}
         </Center>
       </Flex>
     </Link>

apps/landing/src/app/StarButton.tsx

@@ -1,4 +1,4 @@
-@import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css');
+@import url(https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css);
 
 table {
     border-collapse: collapse;