fix repeat animation

src/pages/viewer/components/BookViewer.tsx

@@ -126,13 +126,22 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
   const bookRef = useRef<FlipBookInstance | null>(null);
   const bookAreaRef = useRef<HTMLDivElement | null>(null);
   const flipbookWrapperRef = useRef<HTMLDivElement | null>(null);
+  const spineOverlayRef = useRef<HTMLDivElement | null>(null);
   const pageFlipHandlerRef = useRef<(e: FlipEvent) => void>(() => {});
   const [currentPage, setCurrentPage] = useState(0);
   const [isAutoPlayActive, setIsAutoPlayActive] = useState(false);
   const [startPage, setStartPage] = useState(0);
   const [magnifierEnabled, setMagnifierEnabled] = useState(false);
-  /** در حالت read خط وسط روی شکاف جلد دیده می‌شود؛ هنگام ورق‌زدن باید زیر ورق باشد */
-  const [isBookFlipping, setIsBookFlipping] = useState(false);
+  /** ref نه state — تغییر z-index هنگام hover ورق نباید BookPage را remount/re-render کند (انیمیشن ورود دوباره اجرا می‌شد) */
+  const isBookFlippingRef = useRef(false);
+  const setBookFlippingVisual = useCallback((flipping: boolean) => {
+    if (isBookFlippingRef.current === flipping) return;
+    isBookFlippingRef.current = flipping;
+    flipbookWrapperRef.current?.classList.toggle("relative", flipping);
+    flipbookWrapperRef.current?.classList.toggle("z-10", flipping);
+    spineOverlayRef.current?.classList.toggle("z-50", !flipping);
+    spineOverlayRef.current?.classList.toggle("z-0", flipping);
+  }, []);
   const isDesktop = useIsDesktop();
   const legacyIOS = useLegacyIOSSafari();
   const isBrowserFullscreen = useIsBrowserFullscreen();
@@ -394,14 +403,14 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
   const handleChangeState = useCallback(
     (e: PageFlipStateEvent) => {
       if (e.data === "read") {
-        setIsBookFlipping(false);
+        setBookFlippingVisual(false);
         syncPageIndexFromBook();
         commitEntranceAtCurrentSpread();
         return;
       }
-      setIsBookFlipping(true);
+      setBookFlippingVisual(true);
     },
-    [syncPageIndexFromBook, commitEntranceAtCurrentSpread],
+    [syncPageIndexFromBook, commitEntranceAtCurrentSpread, setBookFlippingVisual],
   );
 
   const goToNextPage = useCallback(() => {
@@ -534,10 +543,8 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
           {/* Border و Shadow عمودی در وسط (فقط حالت دوصفحه‌ای دسکتاپ) */}
           {!usePortrait && (
             <div
-              className={clx(
-                "hidden md:block absolute inset-y-0 left-1/2 -translate-x-1/2 w-px border-r border-gray-300 pointer-events-none transition-none",
-                isBookFlipping ? "z-0" : "z-50",
-              )}
+              ref={spineOverlayRef}
+              className="hidden md:block absolute inset-y-0 left-1/2 -translate-x-1/2 w-px border-r border-gray-300 pointer-events-none transition-none z-50"
               style={{
                 boxShadow: "-5px 0 15px rgba(0, 0, 0, 0.15), 5px 0 15px rgba(0, 0, 0, 0.15)",
               }}
@@ -550,10 +557,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
           <div
             ref={flipbookWrapperRef}
             dir="ltr"
-            className={clx(
-              "max-w-full flex justify-center shrink-0 rounded-sm",
-              isBookFlipping && "relative z-10",
-            )}
+            className="max-w-full flex justify-center shrink-0 rounded-sm"
             style={{
               cursor: magnifierEnabled ? "zoom-in" : undefined,
               overflow: "hidden",