diff --git a/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx b/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx index db7f152..696ae85 100644 --- a/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx +++ b/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx @@ -15,6 +15,7 @@ import { getFileColor, getFileExtension } from "../../utils/files"; import Spinner from "../Spinner/Spinner"; import { toast } from "react-toastify"; import getBackendURL from "../../utils/getBackendURL"; +import classNames from "classnames"; interface PhotoViewerPopupProps { file: FileInterface; @@ -27,6 +28,7 @@ const PhotoViewerPopup: React.FC = memo((props) => { const [isThumbnailLoading, setIsThumbnailLoading] = useState( file.metadata.hasThumbnail && !file.metadata.isVideo ); + const [thumbnailError, setThumbnailError] = useState(false); const videoRef = useRef(null); const type = useAppSelector((state) => state.selected.popupModal.type)!; const thumbnailURL = `${getBackendURL()}/file-service/full-thumbnail/${ @@ -285,15 +287,25 @@ const PhotoViewerPopup: React.FC = memo((props) => { />
- {isThumbnailLoading && } + {isThumbnailLoading && !thumbnailError && } {!file.metadata.isVideo && ( setIsThumbnailLoading(false)} - onError={() => setIsThumbnailLoading(false)} + onError={() => setThumbnailError(true)} /> )} + {thumbnailError && ( +
+

Error loading image

+
+ )} {file.metadata.isVideo && !isVideoLoading && (