From 482892ffc13822a1837458ae193fa927b9331eba Mon Sep 17 00:00:00 2001
From: monoid <qaswedfr55@gmail.com>
Date: Fri, 15 Aug 2025 22:01:04 +0900
Subject: [PATCH] feat: add loading spinner to ComicPage component

---
 packages/client/src/page/reader/comicPage.tsx | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/page/reader/comicPage.tsx b/packages/client/src/page/reader/comicPage.tsx
index dadc670..1257788 100644
--- a/packages/client/src/page/reader/comicPage.tsx
+++ b/packages/client/src/page/reader/comicPage.tsx
@@ -8,6 +8,7 @@ import { EnterFullScreenIcon, ExitFullScreenIcon, ExitIcon } from "@radix-ui/rea
 import { useEventListener } from "usehooks-ts";
 import type { Document } from "dbtype";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { Loader2 } from "lucide-react";
 
 interface ComicPageProps {
     params: {
@@ -47,7 +48,7 @@ function ComicViewer({
     }, [pageDown, pageUp]);
 
     useEffect(() => {
-        if(currentImageRef.current){
+        if (currentImageRef.current) {
             if (curPage < 0 || curPage >= totalPage) {
                 return;
             }
@@ -83,7 +84,7 @@ function ComicViewer({
                 className={cn("max-w-full max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 absolute",
                     fade ? "opacity-70 transition-opacity duration-300 ease-in-out" : "opacity-100"
                 )}
-                alt="main content"/>
+                alt="main content" />
             <div className="absolute right-0 w-1/2 h-full z-10 select-none" onMouseDown={() => pageUp(1)} />
             {curPage + 1 < totalPage && (
                 <img src={`/api/doc/${doc.id}/comic/${curPage + 1}`} alt="next page" className="sr-only" />
@@ -121,9 +122,11 @@ export default function ComicPage({
     const [curPage, setCurPage] = useState(0);
     const { isFullScreen, toggleFullScreen } = useFullScreen();
     if (isLoading) {
-        // TODO: Add a loading spinner
-        return <div className="p-4">
-            Loading...
+        return <div className="p-4 flex items-center justify-center gap-2 h-dvh">
+            <Loader2
+                className="w-6 h-6 animate-spin text-primary"
+            />
+            <span className="text-muted-foreground">로딩 중...</span>
         </div>
     }
     if (error) {
@@ -143,27 +146,27 @@ export default function ComicPage({
 
     return (
         <PageNavItem items={<>
-            <NavItem to={`/doc/${params.id}`} name="Back" icon={<ExitIcon />}/>
-            <NavItemButton name={isFullScreen ? "Exit Fullscreen" : "Enter Fullscreen"} icon={isFullScreen ? <ExitFullScreenIcon/> : <EnterFullScreenIcon/>} onClick={()=>{
+            <NavItem to={`/doc/${params.id}`} name="Back" icon={<ExitIcon />} />
+            <NavItemButton name={isFullScreen ? "Exit Fullscreen" : "Enter Fullscreen"} icon={isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />} onClick={() => {
                 toggleFullScreen();
-            }}  />
+            }} />
             <Popover>
                 <PopoverTrigger>
                     <span className="text-sm text-ellipsis" >{curPage + 1}/{data.additional.page as number}</span>
                 </PopoverTrigger>
                 <PopoverContent className="w-28">
-                        <Input type="number" value={curPage + 1} onChange={(e) => 
-                            setCurPage(clip(Number.parseInt(e.target.value) - 1, 
-                            0, 
+                    <Input type="number" value={curPage + 1} onChange={(e) =>
+                        setCurPage(clip(Number.parseInt(e.target.value) - 1,
+                            0,
                             (data.additional.page as number) - 1))} />
                 </PopoverContent>
             </Popover>
         </>}>
             <ComicViewer
-            curPage={curPage}
-            onChangePage={setCurPage}
-            doc={data} 
-            totalPage={data.additional.page as number} />
+                curPage={curPage}
+                onChangePage={setCurPage}
+                doc={data}
+                totalPage={data.additional.page as number} />
         </PageNavItem>
     )
 }
\ No newline at end of file