Update app.py

app.py

@@ -11,6 +11,84 @@ theme.tabulator_site()
 # CONSTANTS & CONFIGURATION
 # =============================================================================
 
+# Custom CSS for loading spinner
+CUSTOM_CSS = """
+<style>
+    /* Loading Overlay */
+    .loading-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(255, 255, 255, 0.92);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.3s ease, visibility 0.3s ease;
+    }
+    
+    .loading-overlay.active {
+        opacity: 1;
+        visibility: visible;
+    }
+    
+    /* Spinner */
+    .spinner {
+        width: 60px;
+        height: 60px;
+        border: 5px solid #e0e0e0;
+        border-top: 5px solid #0d6efd;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin-bottom: 20px;
+    }
+    
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+    
+    .loading-text {
+        font-size: 18px;
+        color: #333;
+        font-weight: 500;
+    }
+    
+    /* Hide content while loading initially */
+    .shiny-busy ~ .container-fluid .card {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+</style>
+"""
+
+# Custom JavaScript for busy state handling
+CUSTOM_JS = """
+<script>
+$(document).ready(function() {
+    // Show loading overlay when Shiny is busy
+    $(document).on('shiny:busy', function(event) {
+        $('.loading-overlay').addClass('active');
+    });
+    
+    // Hide loading overlay when Shiny is idle
+    $(document).on('shiny:idle', function(event) {
+        $('.loading-overlay').removeClass('active');
+    });
+    
+    // Show loading on refresh button click
+    $(document).on('click', '#refresh', function() {
+        $('.loading-overlay').addClass('active');
+    });
+});
+</script>
+"""
+
 # Initialize scrapers
 scraper = api_scraper.MLB_Scrape()
 df_year_old_group = pl.read_parquet('pitch_data_agg_2024.parquet')
@@ -260,8 +338,22 @@ def merge_and_format(df_group, old_df, cols_sub=None, cols_pct=None, suffix="_ol
     return df_merge
 
 
-# UI Definition
+# =============================================================================
+# UI DEFINITION
+# =============================================================================
+
 app_ui = ui.page_fluid(
+    # Inject custom CSS and JS
+    ui.head_content(ui.HTML(CUSTOM_CSS), ui.HTML(CUSTOM_JS)),
+    
+    # Loading overlay
+    ui.div(
+        ui.div(class_="spinner"),
+        ui.div("Loading data...", class_="loading-text"),
+        class_="loading-overlay",
+        id="loading-overlay"
+    ),
+    
     ui.card(
         ui.card_header("2025 MLB Pitch Data App"),
         ui.row(