6f41c6a196697c175a2cf5abcbd247ba24a2fe8e
jcasper
  Mon Jun 15 09:22:37 2026 -0700
Loading spinner for faceted composites (the page must first do the ajax metadata
fetch, then process the result with dataTables). refs #36320

diff --git src/hg/htdocs/style/facetedComposite.css src/hg/htdocs/style/facetedComposite.css
index 3802075d011..de4f4222cb7 100644
--- src/hg/htdocs/style/facetedComposite.css
+++ src/hg/htdocs/style/facetedComposite.css
@@ -1,16 +1,37 @@
 /* SPDX-License-Identifier: MIT; (c) 2025 Andrew D Smith (author) */
+/* Loading indicator shown while metadata is fetched and the table is built */
+#faceted-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75em;
+    padding: 3em 0;
+    color: #555;
+}
+#faceted-loading .faceted-spinner {
+    width: 36px;
+    height: 36px;
+    border: 4px solid #d3eaff;     /* matches the table's light-blue accents */
+    border-top-color: #2b6cb0;
+    border-radius: 50%;
+    animation: faceted-spin 0.8s linear infinite;
+}
+@keyframes faceted-spin {
+    to { transform: rotate(360deg); }
+}
 #container {
     display: flex;
     width: 100%;
     gap: 1em;
     align-items: flex-start;
     box-sizing: border-box;
 }
 #filters {
     display: flex;
     flex-direction: column;
     gap: 1em;
     width: 300px;
     flex-shrink: 0;
     /* ADS: the lines below are for vertical scrolling if needed */
     /* max-height: 80vh; */