async.q and bypassing getDatalogQuery()

src/components/DiscourseContext.tsx

@@ -7,6 +7,7 @@ import {
   Tab,
   Tooltip,
   Checkbox,
+  Spinner,
 } from "@blueprintjs/core";
 import React, {
   useCallback,
@@ -313,17 +314,38 @@ const ContextTab = ({
 };
 
 export const ContextContent = ({ uid, results, args }: Props) => {
-  const [rawQueryResults, setRawQueryResults] = useState(results || []);
+  const [rawQueryResults, setRawQueryResults] = useState<
+    Record<string, DiscourseContextResults[number]>
+  >({});
   const queryResults = useMemo(
-    () => rawQueryResults.filter((r) => !!Object.keys(r.results).length),
+    () =>
+      Object.values(rawQueryResults).filter(
+        (r) => !!Object.keys(r.results).length
+      ),
     [rawQueryResults]
   );
   const [loading, setLoading] = useState(true);
+
   const onRefresh = useCallback(() => {
-    getDiscourseContextResults({ uid, args })
-      .then(setRawQueryResults)
-      .finally(() => setLoading(false));
-  }, [uid, results, setRawQueryResults, setLoading]);
+    setRawQueryResults({});
+    getDiscourseContextResults({
+      uid,
+      args,
+      onProgress: (result) => {
+        setRawQueryResults((prev) => ({
+          ...prev,
+          [result.label]: {
+            label: result.label,
+            results: {
+              ...(prev[result.label]?.results || {}),
+              ...result.results,
+            },
+          },
+        }));
+      },
+    }).finally(() => setLoading(false));
+  }, [uid, setRawQueryResults, setLoading]);
+
   useEffect(() => {
     if (!results) {
       onRefresh();
@@ -365,9 +387,14 @@ export const ContextContent = ({ uid, results, args }: Props) => {
             }
           />
         ))}
+        {loading && (
+          <div className="flex items-center m-auto gap-2 text-sm text-muted-foreground">
+            <Spinner />
+          </div>
+        )}
       </Tabs>
     </>
-  ) : loading ? (
+  ) : loading && !results ? (
     <Tabs selectedTabId={0} onChange={() => {}} vertical>
       <Tab
         id={0}

src/components/QueryPage.tsx

@@ -63,36 +63,31 @@ const QueryPage = ({ pageUid, isEditBlock, showAlias }: Props) => {
   const [results, setResults] = useState<Result[]>([]);
   const containerRef = useRef<HTMLDivElement>(null);
   const onRefresh = useCallback(
-    (loadInBackground = false) => {
+    async (loadInBackground = false) => {
       setError("");
       setLoading(!loadInBackground);
       const args = parseQuery(pageUid);
-      setTimeout(() => {
-        fireQuery(args)
-          .then((results) => {
-            setColumns(args.columns);
-            setResults(results);
-          })
-          .catch(() => {
-            setError(
-              `Query failed to run. Try running a new query from the editor.`
-            );
-          })
-          .finally(() => {
-            const tree = getBasicTreeByParentUid(pageUid);
-            const node = getSubTree({ tree, key: "results" });
-            return (
-              node.uid
-                ? Promise.resolve(node.uid)
-                : createBlock({
-                    parentUid: pageUid,
-                    node: { text: "results" },
-                  })
-            ).then(() => {
-              setLoading(false);
-            });
-          });
-      }, 1);
+
+      try {
+        const results = await fireQuery(args);
+        setColumns(args.columns);
+        setResults(results);
+      } catch (err) {
+        setError(
+          `Query failed to run. Try running a new query from the editor.`
+        );
+      } finally {
+        const tree = getBasicTreeByParentUid(pageUid);
+        const node = getSubTree({ tree, key: "results" });
+        const uid =
+          node.uid ||
+          (await createBlock({
+            parentUid: pageUid,
+            node: { text: "results" },
+          }));
+        setLoading(false);
+        return uid;
+      }
     },
     [setResults, pageUid, setLoading, setColumns]
   );