fixing batching for loading data

assets/styles.css

@@ -2,3 +2,181 @@
   align-items: center;
   padding: 12px 12px;
 }
+
+/* Beautiful tqdm-style Progress Bar Styles */
+.progress-container {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  border: 1px solid #dee2e6;
+  border-radius: 12px;
+  padding: 16px;
+  margin: 8px 0;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+}
+
+.progress-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: #495057;
+}
+
+.progress-icon {
+  font-size: 16px;
+  animation: pulse 2s infinite;
+}
+
+.progress-bar-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.progress-percentage {
+  font-weight: bold;
+  font-size: 13px;
+  color: #495057;
+  min-width: 50px;
+  text-align: right;
+}
+
+.progress-bar {
+  flex: 1;
+  height: 8px;
+  background-color: #e9ecef;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.progress-fill::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-image: linear-gradient(
+    -45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 20px 20px;
+  animation: progress-stripes 1s linear infinite;
+}
+
+@keyframes progress-stripes {
+  0% { background-position: 0 0; }
+  100% { background-position: 20px 0; }
+}
+
+.progress-bar-low .progress-fill {
+  background: linear-gradient(90deg, #dc3545, #e74c3c);
+}
+
+.progress-bar-medium-low .progress-fill {
+  background: linear-gradient(90deg, #ffc107, #f39c12);
+}
+
+.progress-bar-medium .progress-fill {
+  background: linear-gradient(90deg, #fd7e14, #e67e22);
+}
+
+.progress-bar-high .progress-fill {
+  background: linear-gradient(90deg, #28a745, #27ae60);
+}
+
+.progress-bar-complete .progress-fill {
+  background: linear-gradient(90deg, #20c997, #1abc9c);
+  animation: complete-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes complete-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.8; }
+}
+
+.progress-stats {
+  font-weight: bold;
+  font-size: 13px;
+  color: #495057;
+  min-width: 60px;
+}
+
+.progress-details {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #6c757d;
+  margin-top: 8px;
+}
+
+.progress-details code {
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  font-size: 11px;
+  letter-spacing: 0.5px;
+  color: #495057;
+}
+
+.remaining-items {
+  color: #6c757d;
+  font-style: italic;
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .progress-container {
+    background: linear-gradient(135deg, #343a40 0%, #495057 100%);
+    border-color: #6c757d;
+    color: #f8f9fa;
+  }
+  
+  .progress-header, .progress-percentage, .progress-stats {
+    color: #f8f9fa;
+  }
+  
+  .progress-bar {
+    background-color: #495057;
+  }
+  
+  .progress-details {
+    color: #adb5bd;
+  }
+  
+  .progress-details code {
+    background: #495057;
+    border-color: #6c757d;
+    color: #f8f9fa;
+  }
+  
+  .remaining-items {
+    color: #adb5bd;
+  }
+}

components/review_dashboard_page.py

@@ -481,15 +481,23 @@ class ReviewDashboardPage:
 
         def navigate_review_fn(items, current_idx, direction):
             if not items:
-                return 0
+                return 0, False
             if direction == "next":
                 new_idx = min(current_idx + 1, len(items) - 1)
-                # Check if we're getting close to the end - load more items if needed
-                if new_idx >= len(items) - 2 and len(items) % 5 == 0:  # Near end and items is a multiple of initial batch size
-                    log.info(f"User is near end of loaded items ({new_idx}/{len(items)}), may need to load more items")
-                return new_idx
+                # Only load more items when user reaches the LAST item of a batch
+                should_load_more = (new_idx == len(items) - 1 and len(items) % 5 == 0)
+                if should_load_more:
+                    log.info(f"User reached end of loaded items ({new_idx}/{len(items)}), will load more items")
+                return new_idx, should_load_more
             else:  # prev
-                return max(current_idx - 1, 0)
+                return max(current_idx - 1, 0), False
+        
+        def conditional_load_more_fn(items, session, should_load_more):
+            """Load more items if needed, otherwise return existing items"""
+            if should_load_more:
+                log.info("Loading more items for navigation...")
+                return load_more_items_fn(items, session, current_batch_size=10)  # Reduced from 50 to 10 items
+            return items
 
         def save_validation_fn(items, idx, session, approved: bool, rejection_reason: str = ""):
             if not items or idx >= len(items):
@@ -600,7 +608,7 @@ class ReviewDashboardPage:
             #     gr.Warning(f"Invalid Data ID format: {target_data_id}")
             return current_idx
 
-        def load_more_items_fn(items, session, current_batch_size=100):
+        def load_more_items_fn(items, session, current_batch_size=10):
             """Load more items when user needs them (pagination support)"""
             user_id = session.get("user_id")
             username = session.get("username")
@@ -625,44 +633,26 @@ class ReviewDashboardPage:
                     
                 # Load next batch starting from where we left off
                 offset = len(items)
+                
+                # FAST LOADING: Use same strategy as initial load - simple query without complex JOINs
                 query = db.query(
                     Annotation,
                     TTSData.filename,
-                    TTSData.sentence,
-                    Validation.validated,
-                    Validation.description
+                    TTSData.sentence
                 ).join(
                     TTSData, Annotation.tts_data_id == TTSData.id
-                ).outerjoin(
-                    Validation, 
-                    (Validation.annotation_id == Annotation.id) & 
-                    (Validation.validator_id == user_id)
                 ).filter(
                     Annotation.annotator_id == target_annotator_obj.id
                 ).order_by(Annotation.id).offset(offset).limit(current_batch_size)
                 
                 results = query.all()
                 
-                # Process new items same as before
+                # Process new items with minimal data - validation status loaded on-demand
                 new_items = []
-                for annotation, filename, sentence, validated, validation_description in results:
+                for annotation, filename, sentence in results:
+                    # Check if annotation is deleted (minimal processing)
                     is_deleted = not annotation.annotated_sentence or annotation.annotated_sentence.strip() == ""
-                    
-                    validation_status = "Not Reviewed"
-                    if validated is not None:
-                        if validated:
-                            validation_status = "Approved"
-                        else:
-                            validation_status = "Rejected"
-                            if validation_description:
-                                validation_status += f" ({validation_description})"
-                    
-                    if is_deleted:
-                        annotated_sentence_display = "[DELETED ANNOTATION]"
-                        if validation_status == "Not Reviewed":
-                            validation_status = "Not Reviewed (Deleted)"
-                    else:
-                        annotated_sentence_display = annotation.annotated_sentence
+                    annotated_sentence_display = "[DELETED ANNOTATION]" if is_deleted else annotation.annotated_sentence
                     
                     new_items.append({
                         "annotation_id": annotation.id,
@@ -672,7 +662,8 @@ class ReviewDashboardPage:
                         "annotated_sentence": annotated_sentence_display,
                         "is_deleted": is_deleted,
                         "annotated_at": annotation.annotated_at.isoformat() if annotation.annotated_at else "",
-                        "validation_status": validation_status
+                        "validation_status": "Loading...",  # Will be loaded on-demand
+                        "validation_loaded": False  # Track if validation status has been loaded
                     })
                 
                 # Combine with existing items