htmx-indicator

app.py

@@ -139,8 +139,7 @@ def query_db(query: str, k: int = 10, reranker: str = "cohere"):
 # FastHTML app -----
 ###########################################################################
 
-style = Style(
-    """
+style = Style("""
         :root {
             color-scheme: dark;
         }
@@ -169,8 +168,34 @@ style = Style(
             white-space: pre-wrap;
             word-wrap: break-word;
         }
-    """
-)
+        .htmx-indicator {
+            display: none;
+        }
+        .htmx-request .htmx-indicator {
+            display: inline-block;
+        }
+        .spinner {
+            display: inline-block;
+            width: 2.5em;
+            height: 2.5em;
+            border: 0.3em solid rgba(255,255,255,.3);
+            border-radius: 50%;
+            border-top-color: #fff;
+            animation: spin 1s ease-in-out infinite;
+            margin-left: 10px;
+            vertical-align: middle;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .searching-text {
+            font-size: 1.2em;
+            font-weight: bold;
+            color: #fff;
+            margin-right: 10px;
+            vertical-align: middle;
+        }
+    """)
 
 # get the fast app and route
 app, rt = fast_app(live=True, hdrs=(style,))
@@ -205,9 +230,15 @@ async def get():
     query_form = Form(
         Textarea(id="query", name="query", placeholder="Enter your query..."),
         Button("Submit", type="submit"),
+        Div(
+            Span("Searching...", cls="searching-text htmx-indicator"),
+            Span(cls="spinner htmx-indicator"),
+            cls="indicator-container",
+        ),
         id="search-form",
         hx_post="/search",
         hx_target="#search-results",
+        hx_indicator=".indicator-container",
     )
 
     # results_div = Div(H2("Search Results"), Div(id="search-results", cls="results-container"))