diff --git a/frontend/src/components/collection/View.tsx b/frontend/src/components/collection/View.tsx index 86c6a8e..9464037 100644 --- a/frontend/src/components/collection/View.tsx +++ b/frontend/src/components/collection/View.tsx @@ -50,6 +50,7 @@ const CollectionView: React.FC = ({ collection }) => { }); if (error) addAlert(error.detail?.toString(), "error"); else setImages(images); + setIsLoading(false); }; fetchImages(); } @@ -62,7 +63,6 @@ const CollectionView: React.FC = ({ collection }) => { if (image) await preloadImage(image.image_url); } setCurrentImage(translatedImages[currentImageIndex]); - setIsLoading(false); } }; @@ -138,67 +138,69 @@ const CollectionView: React.FC = ({ collection }) => {
- ) : currentImage ? ( -
-
- Collection Image + ) : translatedImages ? ( + currentImage && ( +
+
+ Collection Image +
+
+ +
+ {currentImage.transcriptions.length != 0 ? ( + <> +

+ {currentImage.transcriptions.map( + (transcription, index) => { + return ( + + {transcription.text} + + ); + }, + )} +

+

+ { + currentImage.transcriptions[currentTranscriptionIndex] + .pinyin + } +

+

+ { + currentImage.transcriptions[currentTranscriptionIndex] + .translation + } +

+ + + ) : ( +
No transcript
+ )} +
+
+
-
- -
- {currentImage.transcriptions.length != 0 ? ( - <> -

- {currentImage.transcriptions.map( - (transcription, index) => { - return ( - - {transcription.text} - - ); - }, - )} -

-

- { - currentImage.transcriptions[currentTranscriptionIndex] - .pinyin - } -

-

- { - currentImage.transcriptions[currentTranscriptionIndex] - .translation - } -

- - - ) : ( -
No transcript
- )} -
-
-
-
+ ) ) : (