fix(bookreader): Loader not shown

This commit is contained in:
Julien Froidefond
2025-02-16 13:57:24 +01:00
parent 174ca7b9f4
commit d80c44d66f

View File

@@ -537,16 +537,16 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
)} )}
{/* Pages */} {/* Pages */}
<div className="relative flex-1 flex items-center justify-center overflow-hidden p-1"> <div className="relative flex-1 flex items-center justify-center overflow-hidden p-1">
<div className="relative w-full h-full flex items-center justify-center"> <div className="relative w-full h-[calc(100vh-2rem)] flex items-center justify-center">
{/* Page courante */} {/* Page courante */}
<div className="relative max-h-[calc(100vh-2rem)] flex items-center justify-center"> <div className="relative h-full w-full flex items-center justify-center">
<ImageLoader isLoading={isLoading} /> <ImageLoader isLoading={isLoading} />
{currentPageUrl && ( {currentPageUrl && (
<img <img
src={currentPageUrl} src={currentPageUrl}
alt={`Page ${currentPage}`} alt={`Page ${currentPage}`}
className={cn( className={cn(
"max-h-[calc(100vh-2rem)] w-auto object-contain transition-opacity duration-300", "max-h-full w-auto object-contain transition-opacity duration-300",
isLoading ? "opacity-0" : "opacity-100" isLoading ? "opacity-0" : "opacity-100"
)} )}
onLoad={() => { onLoad={() => {
@@ -559,14 +559,14 @@ export function BookReader({ book, pages, onClose }: BookReaderProps) {
{/* Deuxième page en mode double page */} {/* Deuxième page en mode double page */}
{isDoublePage && shouldShowDoublePage(currentPage) && ( {isDoublePage && shouldShowDoublePage(currentPage) && (
<div className="relative max-h-[calc(100vh-2rem)] flex items-center justify-center"> <div className="relative h-full w-full flex items-center justify-center">
<ImageLoader isLoading={secondPageLoading} /> <ImageLoader isLoading={secondPageLoading} />
{nextPageUrl && ( {nextPageUrl && (
<img <img
src={nextPageUrl} src={nextPageUrl}
alt={`Page ${currentPage + 1}`} alt={`Page ${currentPage + 1}`}
className={cn( className={cn(
"max-h-[calc(100vh-2rem)] w-auto object-contain transition-opacity duration-300", "max-h-full w-auto object-contain transition-opacity duration-300",
secondPageLoading ? "opacity-0" : "opacity-100" secondPageLoading ? "opacity-0" : "opacity-100"
)} )}
onLoad={() => { onLoad={() => {