added view query sample loading indicator

ui/src/collections/collectionViewQueryTab.js

@@ -171,9 +171,13 @@ export function collectionViewQueryTab(upsertData) {
             ),
             t.div(
                 { className: "col-12" },
-                t.p({ className: "txt-sm txt-bold" }, "Sample output:"),
+                t.p(
+                    { className: "txt-sm txt-bold" },
+                    "Sample output:",
+                ),
                 t.div(
                     { className: "view-query-sample-wrapper" },
+                    t.span({ hidden: () => !local.isTesting, className: "loader sm" }),
                     app.components.codeBlock({
                         language: () => local.testError ? "plain" : "js",
                         className: () => `view-query-sample ${local.testError ? "txt-danger" : ""}`,

ui/src/css/collectionModal.css

@@ -88,7 +88,17 @@
     padding: var(--smSpacing);
 }
 
+.view-query-sample-wrapper {
+    position: relative;
+    .loader {
+        position: absolute;
+        z-index: 1;
+        right: 10px;
+        top: 10px;
+    }
+}
 .view-query-sample code {
+    z-index: 0;
     max-height: 300px;
     background: none;
     border: 1px solid var(--surfaceAlt2Color);