fixed loading issues

app.py

@@ -1,12 +1,11 @@
 import gradio as gr
+import pandas as pd
 import bittensor as bt
 import requests
-import pandas as pd
 from apscheduler.schedulers.background import BackgroundScheduler
 
-background_url2 = 'https://media.discordapp.net/attachments/1294437373773484093/1305702292774719569/80-_.png?ex=6733fd85&is=6732ac05&hm=f94d26610cc6c9d39318a102fb2484eae6ab83a64226eba3af81fbe305245fc2&=&format=webp&quality=lossless&width=717&height=414'
-background_url  = 'https://media.discordapp.net/attachments/1294437373773484093/1299205237877510184/p7zQRQMPb8W1qitaFl_C9_c6ef80e2981d4a27a53c3708de43bb44.jpg?ex=67336cea&is=67321b6a&hm=aaa1d39210d631d9f800802da8a869c71e395802574ae61bee6030671f53ef3c&=&format=webp'
-# Enhanced Custom CSS
+background_url  = "https://cdn-lfs.hf.co/repos/a4/b4/a4b48e51a6a5ebd9414fc6798da9acf09a6a9425ea160334a1a81c4ad3fdb801/7f89926e2018d54403ac1dc8b0d6fe2401a6489d7da11df27259a07cde7acf87?response-content-disposition=inline%3B+filename*%3DUTF-8%27%27background2.png%3B+filename%3D%22background2.png%22%3B&response-content-type=image%2Fpng&Expires=1731722075&Policy=eyJTdGF0ZW1lbnQiOlt7IkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTczMTcyMjA3NX19LCJSZXNvdXJjZSI6Imh0dHBzOi8vY2RuLWxmcy5oZi5jby9yZXBvcy9hNC9iNC9hNGI0OGU1MWE2YTVlYmQ5NDE0ZmM2Nzk4ZGE5YWNmMDlhNmE5NDI1ZWExNjAzMzRhMWE4MWM0YWQzZmRiODAxLzdmODk5MjZlMjAxOGQ1NDQwM2FjMWRjOGIwZDZmZTI0MDFhNjQ4OWQ3ZGExMWRmMjcyNTlhMDdjZGU3YWNmODc%7EcmVzcG9uc2UtY29udGVudC1kaXNwb3NpdGlvbj0qJnJlc3BvbnNlLWNvbnRlbnQtdHlwZT0qIn1dfQ__&Signature=Y9KvhLMB7xHfQUnq2RC4rMDegTBzbqoMiHAIJzVKy%7E7ajPw2p-AQ19KCYCaXPNbElSV7PZowowMOS%7EtK98A7SM4ndHDePx3OcD%7EDNP8w150rLj58XeCZuVSZ32ayv%7Eb6nZEwYjUbrtrFboN5T9HG8xezW7BgmcXzV3iHppgSNu%7EnwKwJvorVr%7EyddXC6AMsAjsYKYOl1AxnkiMiIKeoD7Rd4ZaAlQsbqAC31BfnbSkBfPq4g0HlCiQYvYsxoofyLsGslnx9X5yIPaYRIRz3uJibPwDZg6GCEYViOfKWwiWV74iA1ptt2DeWLSxBRkjRfnv-HMAs25GmMjqyF85o8vA__&Key-Pair-Id=K3RPWS32NSSJCE"
+#Enhanced Custom CSS
 custom_css = """
 #component-0 {
     max-width: 100% !important;
@@ -24,16 +23,39 @@ custom_css = """
     background-repeat: no-repeat !important;
     min-height: 100vh !important;
 }
+
+.header-box {
+    text-align: center;
+    max-width: 100%;
+    margin: 20px auto;
+    padding: 1rem;
+    background-color: rgba(17, 24, 39, 0.95);  /* Darker, more opaque background */
+    border-radius: 1rem;
+}
+
+.header-box h1 {
+    color: white;
+    margin: 0;
+    font-size: 2rem;
+}
+
+.header-box p {
+    color: white;  /* Changed to white instead of gray */
+    margin-top: 0.5rem;
+}
 """
 
 # Add error handling for bittensor initialization
 try:
     subtensor = bt.subtensor()
     metagraph = bt.metagraph(netuid=36)
+    # Preload initial data
+    initial_df = get_validator_data()
+    initial_timestamp = pd.Timestamp.now().strftime("%Y-%m-%d %H:%M:%S UTC")
 except Exception as e:
-    print(f"Failed to initialize bittensor: {e}")
-    subtensor = None
-    metagraph = None
+    print(f"Failed to initialize: {e}")
+    initial_df = pd.DataFrame()
+    initial_timestamp = "Failed to load initial data"
 
 def get_validator_data() -> pd.DataFrame:
     if subtensor is None or metagraph is None:
@@ -116,6 +138,41 @@ def get_validator_data() -> pd.DataFrame:
     df['VTrust'] = df['VTrust'].round(4)
     return df.sort_values('Step', ascending=False)[['Name', 'UID', 'Axon', 'API', 'Step', 'Recent Bits', 'Updated', 'VTrust']]
 
+# Data functions first
+def fetch_data():
+    # your data fetching logic
+    pass
+
+def create_leaderboard():
+    try:
+        data = fetch_data()
+        if not data:
+            return pd.DataFrame()
+        return data
+    except Exception as e:
+        print(f"Error creating leaderboard: {e}")
+        return pd.DataFrame()
+
+def update_data():
+    try:
+        data = create_leaderboard()
+        error_msg = ""
+        success = True
+    except Exception as e:
+        data = pd.DataFrame()
+        error_msg = f"Error loading data: {str(e)}"
+        success = False
+    return data, error_msg, not success
+
+# Add this before creating the app
+header_html = """
+<div class="header-box">
+    <h1>SN36 Validator Leaderboard</h1>
+    <p>Real-time validator status monitoring</p>
+</div>
+"""
+
+# UI components last
 # Create the Gradio interface with custom theme
 app = gr.Blocks(
     title="SN36 Validator Leaderboard",
@@ -126,26 +183,26 @@ app = gr.Blocks(
     )
 )
 
-# Update the HTML template
-header_html = """
-<div style="text-align: center; max-width: 100%; padding: 1rem; background-color: #1f2937; border-radius: 1rem;">
-    <h1 style="color: white;">SN36 Validator Leaderboard</h1>
-    <p style="color: white;">Real-time tracking of validator performance and bits</p>
-</div>
-"""
-
 with app:
     gr.HTML(header_html)
     
     with gr.Tabs(elem_id="main-tabs"):
         with gr.Tab("📊 Leaderboard", elem_id="leaderboard-tab"):
+            # Initialize with preloaded data
             leaderboard = gr.DataFrame(
+                value=initial_df,
                 headers=["Name", "UID", "Axon", "API", "Step", "Recent Bits", "Updated", "VTrust"],
                 datatype=["str", "number", "str", "html", "number", "str", "number", "number"],
                 elem_id="leaderboard-table",
                 render=True
             )
             
+            # Initialize with preloaded timestamp
+            status_message = gr.Markdown(
+                value=f"Last updated: {initial_timestamp}",
+                elem_classes=["status-msg"]
+            )
+            
             with gr.Row(equal_height=True):
                 refresh_button = gr.Button("🔄 Refresh Data", variant="primary", elem_classes=["refresh-btn"])
                 auto_refresh = gr.Checkbox(
@@ -154,8 +211,6 @@ with app:
                     interactive=True
                 )
             
-            status_message = gr.Markdown("Last updated: Never", elem_classes=["status-msg"])
-            
         with gr.Tab("ℹ️ About"):
             gr.Markdown(
                 """