Add state loading, update user guide documentation

assets/styles.css

@@ -352,3 +352,46 @@ footer {
     background-color: var(--button-hover-background-color);
 }
 
+#sticky-toc {
+    position: fixed;
+    top: 120px;
+    right: 20px;
+    width: 200px;
+    padding: 15px;
+    background-color: var(--banner-background-color);
+    color: var(--banner-text-color);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    z-index: 1000;
+}
+
+#sticky-toc ul {
+    list-style: none;
+    padding: 0;
+}
+
+#sticky-toc li {
+    margin-bottom: 10px;
+}
+
+#sticky-toc a {
+    text-decoration: none;
+    color: var(--button-text-color);
+}
+
+#sticky-toc a:hover {
+    color: var(--button-hover-background-color);
+}
+
+button {
+    background-color: var(--button-background-color);
+    color: var(--button-text-color);
+    padding: 10px 20px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: var(--button-hover-background-color);
+}

index.html

@@ -21,7 +21,7 @@
         <a href="#features">Features</a>
         <a href="#video-demo">Video Demo</a>
         <a href="user_guide.html">User Guide</a>
-        <a href="https://github.com/thomasnapier/LEAVES/archive/refs/heads/main.zip">Download</a>
+        <a href="https://github.com/thomasnapier/LEAVES/releases">Download</a>
     </nav>
 </div>
 
@@ -34,7 +34,7 @@
         <h1>LEAVES: Large-scale Ecoacoustics Annotation and Visualization with Efficient Segmentation</h1>
         <p>Streamline your ecoacoustic analysis with LEAVES, offering advanced tools for large-scale soundscape annotation and visualization. Join researchers and citizen scientists using LEAVES to analyze complex soundscapes faster and more accurately.</p>
         <div style="margin-top: 1rem;">
-            <a href="https://github.com/thomasnapier/LEAVES/archive/refs/heads/main.zip" class="cta-button">Download Now</a>
+            <a href="https://github.com/thomasnapier/LEAVES/releases" class="cta-button">Download Now</a>
             <a href="https://leaves-xuli.onrender.com/" class="cta-button" target="_blank">Try Demo</a>
         </div>
     </section>
@@ -119,7 +119,7 @@ <h2>Download and Installation</h2>
         <p>Once set up, LEAVES will launch a web-based interface for easy interaction.</p>
     </section>
     <div style="margin-top: 1rem; text-align: center;">
-        <a href="https://github.com/thomasnapier/LEAVES/archive/refs/heads/main.zip" class="cta-button">Download Now</a>
+        <a href="https://github.com/thomasnapier/LEAVES/releases" class="cta-button">Download Now</a>
         <a href="https://leaves-xuli.onrender.com/" class="cta-button" target="_blank">Try Demo</a>
     </div>
 </div>

src/app.py

@@ -166,6 +166,10 @@ def create_figure(df, current_cluster_index):
 }
 
 app.layout = html.Div([
+    dcc.Loading(
+        id="loading-indicator",
+        type="default",  # Or "circle", "dot", etc.
+        children=[html.Div([
     dcc.Store(id='config-store', data=default_values),
     html.Div([
         html.Img(src=f'data:image/png;base64,{encoded_logo}', id='logo'),
@@ -546,7 +550,14 @@ def create_figure(df, current_cluster_index):
     html.Div(id='csv-test'),
     html.Div(id='temporary-storage', style={'display': 'none'}),
     dcc.Store(id='processed-data-store')
-], id='main-container')
+], id='main-container'),
+html.Div(id="app-content"),
+        ],
+        fullscreen=False  # Keep this false to allow positioning
+    ),
+    dbc.Progress(id="progress-bar", value=0, striped=True, animated=True,
+                 style={"position": "fixed", "bottom": "0", "width": "100%"})
+])
 
 
 # Callbacks

src/assets/css/js/loading.js

@@ -0,0 +1,14 @@
+window.addEventListener('load', function () {
+    var progressBar = document.getElementById('progress-bar');
+    var renderer = window.dashRenderer;
+
+    if (renderer) {
+        renderer.on('request', function () {
+            progressBar.style.width = '50%';  // Example: Update width on request
+        });
+
+        renderer.on('response', function () {
+            progressBar.style.width = '100%';  // Example: Set to 100% on response
+        });
+    }
+});

src/assets/css/styles.css

@@ -410,4 +410,17 @@ input:checked + .slider:before {
 }
 .option-component {
     margin-top: 10px;
+}
+
+.progress-value {
+    display: none;
+}
+
+#progress-bar {
+    position: fixed;
+    bottom: 0;
+    width: 0%;
+    height: 5px;
+    background-color: #007bff; /* Bootstrap primary color */
+    transition: width 0.3s ease;
 }