Move Load All button to response header, auto-dismiss progress after 5s

Load All button now renders inline in the response-meta bar (right of
item count) via a clientside callback that reparents it into an anchor
element. Progress message auto-clears 5 seconds after loading completes
or errors. Removed fetch-bar-row wrapper; status bar is now a direct
child of response-panel.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: guidooswaldDB

app.py

@@ -544,8 +544,10 @@ def build_response_panel(result: Dict[str, Any], chips: Optional[List] = None) -
         html.Div([
             dbc.Badge([html.I(className=f"bi {icon} me-1"), str(code) if code else "Error"],
                       color=status_color, className="status-badge"),
-            html.Span(f"{ms}ms", className="timing-label font-mono ms-2"),
+            html.Span(f"{ms:,}ms", className="timing-label font-mono ms-2"),
             html.Span(item_count, className="timing-label") if item_count else None,
+            # Anchor point for the absolutely-positioned Load All button
+            html.Span(id="load-all-anchor", className="load-all-anchor"),
             html.Span(result.get("url", ""), className="response-url ms-auto"),
         ], className="response-meta"),
         html.Div(body_children, className="response-body"),
@@ -963,18 +965,16 @@ def _custom_section():
         html.Div([
             html.Div(WELCOME, id="endpoint-detail", className="form-panel"),
             html.Div([
-                html.Div([
-                    html.Div(id="fetch-status-bar", className="fetch-status-bar"),
-                    html.Button(
-                        [html.I(className="bi bi-cloud-download me-1"), "Load All"],
-                        id="sp-load-all-btn",
-                        n_clicks=0,
-                        className="sp-load-all-btn",
-                        title="Fetch all remaining pages",
-                        style={"display": "none"},
-                    ),
-                ], className="fetch-bar-row"),
+                html.Div(id="fetch-status-bar", className="fetch-status-bar"),
                 html.Div(_RESPONSE_EMPTY, id="response-container", className="response-container"),
+                html.Button(
+                    [html.I(className="bi bi-cloud-download me-1"), "Load All"],
+                    id="sp-load-all-btn",
+                    n_clicks=0,
+                    className="sp-load-all-btn",
+                    title="Fetch all remaining pages",
+                    style={"display": "none"},
+                ),
             ], className="response-panel"),
         ], className="main-content"),
     ], className="app-body"),
@@ -1887,13 +1887,23 @@ def poll_load_all(n_intervals, cache):
         ], className="fetch-status-inner loading")
         return no_update, no_update, no_update, status, False
 
-    # Done or error — render final result
+    # Auto-dismiss: if finished_at was set, wait 5s then clear status bar
+    finished_at = state.get("finished_at")
+    if finished_at and not state.get("done"):
+        if time.time() - finished_at >= 5:
+            state.pop("finished_at", None)
+            return no_update, no_update, no_update, "", True  # clear status, stop ticker
+        return NO  # keep ticking, waiting to dismiss
+
+    if not state.get("done"):
+        return NO
+
+    # Done or error — render final result and set dismiss timer
     if state.get("error"):
         status = html.Div([
             html.I(className="bi bi-exclamation-triangle-fill me-2"),
             f"Error after {pages} pages ({total:,} items): {state['error']}",
         ], className="fetch-status-inner error")
-        # Still render whatever we got
     else:
         status = html.Div([
             html.I(className="bi bi-check-circle-fill me-2"),
@@ -1921,10 +1931,10 @@ def poll_load_all(n_intervals, cache):
     if ep_id:
         new_cache[ep_id] = {"result": merged_result, "chips": chips or None}
 
-    # Reset state for next use
-    _load_all_state.update({"running": False, "done": False, "items": []})
+    # Mark done, set dismiss timer — keep ticker running for auto-dismiss
+    _load_all_state.update({"done": False, "items": [], "finished_at": time.time()})
 
-    return build_response_panel(merged_result, chips), new_cache, chips or None, status, True
+    return build_response_panel(merged_result, chips), new_cache, chips or None, status, False
 
 
 # 13. Search filter
@@ -2180,6 +2190,25 @@ def update_curl_display(last_req, conn_config):
 )
 
 
+# Reparent the Load All button into the response-meta bar after each render
+app.clientside_callback(
+    """
+    function(children, style) {
+        var anchor = document.getElementById('load-all-anchor');
+        var btn = document.getElementById('sp-load-all-btn');
+        if (anchor && btn) {
+            anchor.appendChild(btn);
+        }
+        return window.dash_clientside.no_update;
+    }
+    """,
+    Output("sp-load-all-btn", "className"),
+    Input("response-container", "children"),
+    Input("sp-load-all-btn", "style"),
+    prevent_initial_call=True,
+)
+
+
 # ── Entry point ───────────────────────────────────────────────────────────────
 if __name__ == "__main__":
     port = int(os.getenv("DATABRICKS_APP_PORT", "8050"))

assets/style.css

@@ -257,6 +257,7 @@ body {
   flex-direction: column;
   overflow: hidden;
   min-width: 0;
+  position: relative;
 }
 
 /* ── Welcome Panel ────────────────────────────────────────────────── */
@@ -613,24 +614,24 @@ body {
   border-radius: 3px;
 }
 .sp-toggle:hover { color: var(--cyan); background: rgba(0,212,255,0.08); }
+.load-all-anchor { display: inline; }
 .sp-load-all-btn {
   background: rgba(0,212,255,0.1);
   border: 1px solid rgba(0,212,255,0.25);
   color: var(--cyan);
   cursor: pointer;
-  padding: 1px 8px;
-  font-size: 10px;
+  padding: 2px 10px;
+  font-size: 11px;
   font-family: var(--font-mono);
   border-radius: 3px;
   white-space: nowrap;
-  flex-shrink: 0;
   transition: all 0.15s;
+  align-items: center;
 }
 .sp-load-all-btn:hover {
   background: rgba(0,212,255,0.2);
   border-color: rgba(0,212,255,0.45);
 }
-.side-panel.sp-collapsed .sp-load-all-btn { display: none; }
 .sp-load-progress { flex-shrink: 0; }
 .sp-load-progress-active {
   padding: 6px 10px;
@@ -715,8 +716,7 @@ body {
 
 
 /* ── Pagination status bar ────────────────────────────────────────── */
-.fetch-bar-row { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
-.fetch-status-bar { flex: 1; overflow: hidden; }
+.fetch-status-bar { flex-shrink: 0; overflow: hidden; }
 .fetch-status-bar:empty { display: none; }
 
 .fetch-status-inner {

version.txt

@@ -1 +1 @@
-367
+372