monoid/ionian
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Wiki Activity

feat: add loading spinner to ComicPage component

Browse source
This commit is contained in:
monoid 2025-08-15 22:01:04 +09:00
parent bd536f2ea5
commit 482892ffc1
1 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
packages/client/src/page/reader/comicPage.tsx
View file

@ -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>
)
}