loading state animation

Dockerfile

@@ -25,9 +25,6 @@
     # Copy backend code
     COPY py_backend/ /app/
     
-    # Make the thumbnail conversion script executable
-    RUN chmod +x /app/generate_production_thumbnails.py
-    
     # Copy built frontend into the image (served by FastAPI)
     COPY --from=fe /fe/dist /app/static
     
@@ -45,9 +42,6 @@ echo "Starting PromptAid Vision..."\n\
 echo "Running database migrations..."\n\
 alembic upgrade head\n\
 echo "Database migrations completed"\n\
-echo "Generating thumbnails for existing images..."\n\
-python generate_production_thumbnails.py\n\
-echo "Thumbnail generation completed"\n\
 echo "Starting FastAPI server..."\n\
 exec uvicorn app.main:app --host 0.0.0.0 --port $PORT\n\
 ' > /app/start.sh && chmod +x /app/start.sh

frontend/src/components/upload/ModalComponents.tsx

@@ -7,9 +7,10 @@ interface FullSizeImageModalProps {
   preview: string | null;
   selectedImageData?: { file: File; index: number } | null;
   onClose: () => void;
+  isLoading?: boolean;
 }
 
-export function FullSizeImageModal({ isOpen, imageUrl, preview, selectedImageData, onClose }: FullSizeImageModalProps) {
+export function FullSizeImageModal({ isOpen, imageUrl, preview, selectedImageData, onClose, isLoading = false }: FullSizeImageModalProps) {
   if (!isOpen) return null;
 
   // Determine which image to show
@@ -40,10 +41,19 @@ export function FullSizeImageModal({ isOpen, imageUrl, preview, selectedImageDat
           </Button>
         </div>
         <div className={styles.fullSizeModalImage}>
-          <img
-            src={imageSrc}
-            alt={imageAlt}
-          />
+          {isLoading ? (
+            <div className="flex items-center justify-center h-64">
+              <div className="flex items-center gap-2">
+                <Spinner className="w-6 h-6" />
+                <span>Loading image...</span>
+              </div>
+            </div>
+          ) : (
+            <img
+              src={imageSrc}
+              alt={imageAlt}
+            />
+          )}
         </div>
       </div>
     </div>

frontend/src/pages/MapDetailsPage/MapDetailPage.tsx

@@ -1325,16 +1325,9 @@ export default function MapDetailPage() {
                               variant="secondary"
                               size={1}
                               onClick={() => handleViewFullSize(allImages[currentImageIndex])}
-                              disabled={isLoadingImages || !allImages[currentImageIndex]?.image_url || isLoadingFullSizeImage}
+                              disabled={isLoadingImages || !allImages[currentImageIndex]?.image_url}
                             >
-                              {isLoadingFullSizeImage ? (
-                                <div className="flex items-center gap-2">
-                                  <Spinner className="w-4 h-4" />
-                                  <span>Loading...</span>
-                                </div>
-                              ) : (
-                                "View Image"
-                              )}
+                              View Image
                             </Button>
                           </div>
                         </div>
@@ -1375,16 +1368,9 @@ export default function MapDetailPage() {
                               variant="secondary"
                               size={1}
                               onClick={() => handleViewFullSize(filteredMap)}
-                              disabled={!filteredMap.image_url || isLoadingFullSizeImage}
+                              disabled={!filteredMap.image_url}
                             >
-                              {isLoadingFullSizeImage ? (
-                                <div className="flex items-center gap-2">
-                                  <Spinner className="w-4 h-4" />
-                                  <span>Loading...</span>
-                                </div>
-                              ) : (
-                                "View Image"
-                              )}
+                              View Image
                             </Button>
                           </div>
                         </div>
@@ -1674,6 +1660,7 @@ export default function MapDetailPage() {
         preview={null}
         selectedImageData={null}
         onClose={handleCloseFullSizeModal}
+        isLoading={isLoadingFullSizeImage}
       />
     </PageContainer>
   );