querysub 0.165.0 → 0.167.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.165.0",
+  "version": "0.167.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",
@@ -24,9 +24,9 @@
     "node-forge": "https://github.com/sliftist/forge#e618181b469b07bdc70b968b0391beb8ef5fecd6",
     "pako": "^2.1.0",
     "preact": "^10.11.3",
-    "socket-function": "^0.90.0",
+    "socket-function": "^0.105.0",
     "terser": "^5.31.0",
-    "typesafecss": "^0.6.3",
+    "typesafecss": "^0.15.0",
     "yaml": "^2.5.0",
     "yargs": "^15.3.1"
   },

package/src/-0-hooks/hooks.ts

@@ -1,3 +1,5 @@
+import { MaybePromise } from "socket-function/src/types";
+import { CallInterceptor } from "../3-path-functions/PathFunctionHelpers";
 import type { EdgeNodeConfig } from "../4-deploy/edgeNodes";
 import type { ExtraMetadata } from "../5-diagnostics/nodeMetadata";
 
@@ -121,13 +123,18 @@ export const isManagementUser = createHookFunctionReturn<
 
 
 
-declare global {
-    var BOOTED_EDGE_NODE: EdgeNodeConfig | undefined;
-}
-
 
 export function getBootedEdgeNode(): EdgeNodeConfig {
     let edgeNode = globalThis.BOOTED_EDGE_NODE;
     if (!edgeNode) throw new Error(`No edge node booted? This should be impossible.`);
-    return edgeNode;
-}
+    return edgeNode as EdgeNodeConfig;
+}
+
+
+export const interceptCalls = createHookFunctionReturn<
+    <T>(interceptor: CallInterceptor<T>) => T
+>("interceptCalls");
+
+export const onAllPredictionsFinished = createHookFunctionReturn<
+    () => MaybePromise<void>
+>("onAllPredictionsFinished");

package/src/-a-auth/ed25519.ts

@@ -21,7 +21,7 @@ export async function signWithPEM(config: {
         let signature = await signED25519(key, inputMessage);
         return signature;
     } else {
-        let key = await globalThis.crypto.subtle.importKey("spki", Buffer.from(pem), { name: "RSASSA-PKCS1-v1_5", hash: "SHA-256" }, false, ["sign"]);
+        let key = await globalThis.crypto.subtle.importKey("spki", Buffer.from(pem as any), { name: "RSASSA-PKCS1-v1_5", hash: "SHA-256" }, false, ["sign"]);
         let signatureBuffer = await globalThis.crypto.subtle.sign("RSASSA-PKCS1-v1_5", key, inputMessage);
         return Buffer.from(signatureBuffer);
     }

package/src/-f-node-discovery/NodeDiscovery.ts

@@ -523,9 +523,9 @@ const NodeDiscoveryController = SocketFunction.register(
         getAllNodesHash: { hooks: [requiresNetworkTrustHook] },
         // Skip client hooks, so we don't block on authentication (IdentityController), as some of these functions
         //  are needed for authentication to finish!
-        getAllNodeIds: { noClientHooks: true },
-        getNodeId: { noClientHooks: true },
-        isNoNetwork: { noClientHooks: true },
+        getAllNodeIds: { noClientHooks: true, noDefaultHooks: true },
+        getNodeId: { noClientHooks: true, noDefaultHooks: true },
+        isNoNetwork: { noClientHooks: true, noDefaultHooks: true },
     }),
     () => ({
 

package/src/0-path-value-core/PathValueCommitter.ts

@@ -371,8 +371,6 @@ class PathValueCommitter {
                                 });
                                 if (values.length === 0) continue;
 
-                                debugbreak(2);
-                                debugger;
                                 console.log(self.getExistingWatchRemoteNodeId(childPath));
                                 for (let value of values) {
                                     specialInitialParentCausedRejections.push({

package/src/2-proxy/PathValueProxyWatcher.ts

@@ -30,10 +30,10 @@ import type { FunctionMetadata } from "../3-path-functions/syncSchema";
 
 import { DEPTH_TO_DATA, MODULE_INDEX, getCurrentCall, getCurrentCallObj } from "../3-path-functions/PathFunctionRunner";
 import { inlineNestedCalls } from "../3-path-functions/syncSchema";
-import { interceptCalls, runCall } from "../3-path-functions/PathFunctionHelpers";
+import { interceptCallsBase, runCall } from "../3-path-functions/PathFunctionHelpers";
 import { deepCloneCborx } from "../misc/cloneHelpers";
 import { formatPercent } from "socket-function/src/formatting/format";
-import { addStatPeriodic, onTimeProfile } from "../-0-hooks/hooks";
+import { addStatPeriodic, interceptCalls, onAllPredictionsFinished, onTimeProfile } from "../-0-hooks/hooks";
 
 // TODO: Break this into two parts:
 //  1) Run and get accesses
@@ -1032,7 +1032,11 @@ export class PathValueProxyWatcher {
             }
         };
         watcher.hasAnyUnsyncedAccesses = () => {
-            return watcher.pendingUnsyncedAccesses.size > 0 || watcher.pendingUnsyncedParentAccesses.size > 0 || watcher.specialPromiseUnsynced;
+            return (
+                watcher.pendingUnsyncedAccesses.size > 0
+                || watcher.pendingUnsyncedParentAccesses.size > 0
+                || watcher.specialPromiseUnsynced
+            );
         };
 
         function dispose() {
@@ -1110,6 +1114,20 @@ export class PathValueProxyWatcher {
                                 //  to do the permissions checks if they want them
                                 throw new Error(`Nested synced function calls are not allowed. Call the function directly, or use Querysub.onCommitFinished to wait for the function to finish.`);
                             } else if (handling === "after" || handling === undefined) {
+
+                                // We need to wait for predictions to finish, otherwise we run into situations
+                                //  where we call a function which should change a parameter we want to pass
+                                //  to another function, but because the first call didn't predict, the second
+                                //  call gets a different values, causing all kinds of issues.
+                                if (watcher.pendingCalls.length === 0) {
+                                    let waitPromise = onAllPredictionsFinished();
+                                    if (waitPromise) {
+                                        proxyWatcher.triggerOnPromiseFinish(waitPromise, {
+                                            waitReason: "Waiting for predictions to finish",
+                                        });
+                                    }
+                                }
+
                                 watcher.pendingCalls.push({ call, metadata });
                             } else if (handling === "ignore") {
                             } else {
@@ -1122,7 +1140,7 @@ export class PathValueProxyWatcher {
                                 runCodeWithDatabase(proxy, baseFunction)
                             );
                         },
-                    });
+                    }) as Result;
                 }
 
                 // We use atomic object read, as our callers don't want a proxy.

package/src/2-proxy/schema2.ts

@@ -75,9 +75,7 @@ type TypeDefType<T = never, Optional = false> = {
     /** An object (so not atomic), but optional (so you can delete it), without automatic GCing of deleted objects. */
     optionalObjectNoGC<ObjectT>(object: ObjectT): TypeDefType<TypeDefToT<ObjectT>, true>;
 
-    /** "optionalObject" should usually be used, OR, directly use objects, ex, { a: { value: t.string } }.
-     *      However there are some cases when this is useful.
-     *      - An object (so not atomic)
+    /** @deprecated Not really needed, just use an object directly ex, { a: { value: t.string } }. UNLESS this object is optional, then use "optionalObject"
      */
     object<ObjectT>(object: ObjectT): TypeDefType<TypeDefToT<ObjectT>, true>;
 

package/src/3-path-functions/PathFunctionHelpers.ts

@@ -15,6 +15,7 @@ import { getPathStr2 } from "../path";
 import { isNode, sort } from "socket-function/src/misc";
 import { decodeCborx, encodeCborx } from "../misc/cloneHelpers";
 import { parseFilterable } from "../misc/filterable";
+import { interceptCalls } from "../-0-hooks/hooks";
 
 // NOTE: We could deploy single functions, but... we will almost always be updating all functions at
 //      once, because keeping everything on the same git hash reduces a lot of potential bugs.
@@ -101,13 +102,14 @@ export async function runCall(call: CallSpec, metadata: FunctionMetadata) {
     return await writeCall.value(call, metadata);
 }
 
-interface CallInterceptor<T> {
+
+export interface CallInterceptor<T> {
     onCall: (call: CallSpec, metadata: FunctionMetadata) => void;
     code: () => T;
 }
 
 let curInterceptor: CallInterceptor<unknown> | undefined = undefined;
-export function interceptCalls<T>(
+export function interceptCallsBase<T>(
     interceptor: CallInterceptor<T>
 ) {
     let prev = curInterceptor;
@@ -118,6 +120,8 @@ export function interceptCalls<T>(
         curInterceptor = prev;
     }
 }
+interceptCalls.declare(interceptCallsBase);
+
 
 export function writeFunctionCall(config: {
     domainName: string;

package/src/3-path-functions/pathFunctionLoader.ts

@@ -279,19 +279,26 @@ export async function waitForImportBlockers() {
     }
 }
 
+function getDirname(fileName: string) {
+    fileName = fileName.replaceAll("\\", "/");
+    let lastSlash = fileName.lastIndexOf("/");
+    if (lastSlash === -1) return "";
+    return fileName.slice(0, lastSlash);
+}
+
 // On import every parent folder is set to the spec. For root folders this makes
 //  the spec useless, but for unique folders it will only be set once, making it very useful!
 // "overlapping" means multiple folders mapped to this spec
 let folderToSpec = new Map<string, LoadFunctionSpec | "overlapping">();
 function registerSpec(fileName: string, spec: LoadFunctionSpec | "overlapping") {
-    let folder = path.dirname(fileName);
+    let folder = getDirname(fileName);
     while (true) {
         if (folderToSpec.has(folder)) {
             folderToSpec.set(folder, "overlapping");
         } else {
             folderToSpec.set(folder, spec);
         }
-        let parentFolder = path.dirname(folder);
+        let parentFolder = getDirname(folder);
         if (parentFolder === folder) {
             break;
         }
@@ -300,11 +307,11 @@ function registerSpec(fileName: string, spec: LoadFunctionSpec | "overlapping")
 }
 
 export function getSpecFromModule(module: NodeJS.Module): LoadFunctionSpec | undefined {
-    let folder = path.dirname(module.filename);
+    let folder = getDirname(module.filename);
     while (true) {
         let spec = folderToSpec.get(folder);
         if (spec && typeof spec !== "string") return spec;
-        let parentFolder = path.dirname(folder);
+        let parentFolder = getDirname(folder);
         if (parentFolder === folder) break;
         folder = parentFolder;
     }

package/src/3-path-functions/syncSchema.ts

@@ -137,6 +137,12 @@ export type PermissionsParameters = {
                 ```
      * */
     callerMachineId: string;
+
+    // IMPORTANT! DO NOT add "matchedValue" here. It is convenient, BUT, it is better for the user
+    //  to access it themselves using pathWildcards. This makes it more typesafe, allowing
+    //  them to find all references and find that reference (otherwise the reference will be hidden).
+    //  - Also, I don't think we could make matchedValue typesafe at all, so it would have to be any,
+    //      which is terrible.
 };
 /** A false of false will deny read permissions, resulting in all reads being given value with a value
  *      of undefined, and a time of 0.

package/src/4-dom/qreact.tsx

@@ -11,7 +11,7 @@ import { measureBlock, measureCode, measureFnc } from "socket-function/src/profi
 import { canHaveChildren } from "socket-function/src/types";
 import { errorify, logErrors } from "../errors";
 import { cache, lazy } from "socket-function/src/caching";
-import { getPathStr1, getPathIndexAssert } from "../path";
+import { getPathStr1, getPathIndexAssert, getPathStr2 } from "../path";
 import { blue, green, red, yellow } from "socket-function/src/formatting/logColors";
 import { heapTagObj } from "../diagnostics/heapTag";
 import { onHotReload } from "socket-function/hot/HotReloadController";
@@ -1342,19 +1342,24 @@ class QRenderClass {
                 if (Array.isArray(node)) return 0;
                 if (isVNode(node)) {
                     if (node.key) {
-                        return String(node.key);
+                        // The type HAS to match as WELL as the type. Otherwise the key can force
+                        //  spans to match divs, or... differently component types to match, which is bad.
+                        return getPathStr2(String(node.key), getSubKey(node));
                     }
-                    // So... if you change the value of a select option, it changes the parent select.value. Which is...
-                    //      odd. We can easily fix this by just using the value as the key, which prevents us from ever
-                    //      changing the .value
-                    if (node.type === "option") {
-                        return String(node.props.value);
-                    }
-                    let type = node.type;
-                    if (typeof type === "function") {
-                        return QRenderClass.componentIdDedupe(type);
+                    return getSubKey(node);
+                    function getSubKey(node: VirtualDOMElement) {
+                        // So... if you change the value of a select option, it changes the parent select.value. Which is...
+                        //      odd. We can easily fix this by just using the value as the key, which prevents us from ever
+                        //      changing the .value
+                        if (node.type === "option") {
+                            return String(node.props.value);
+                        }
+                        let type = node.type;
+                        if (typeof type === "function") {
+                            return QRenderClass.componentIdDedupe(type);
+                        }
+                        return type;
                     }
-                    return type;
                 }
                 return typeof node;
             }
@@ -1749,7 +1754,7 @@ function updateDOMNodeFields(domNode: DOMNode, vNode: VirtualDOM, prevVNode: Vir
                             ready: false,
                             wrappedCallback: wrapEventCallback(`${owner.debugName}.eventHandlers.${key}`, name,
                                 function (this: any, ...args: any[]) {
-                                    if (!eventNode._eventHandlers?.[name].ready && name === "click") {
+                                    if (name === "click" && !eventNode._eventHandlers?.[name].ready) {
                                         // UPDATE: ONLY for clicks, otherwise we break blur handlers.
                                         // IMPORTANT NOTE: IF you are inside of a click handler and add a handler to
                                         //      the parent, the parent's handler will be triggered. An event might
@@ -1763,6 +1768,17 @@ function updateDOMNodeFields(domNode: DOMNode, vNode: VirtualDOM, prevVNode: Vir
                                         //      before we start
                                         return;
                                     }
+                                    // Ignore blurs for disconnected elements. This frequently happens when state changes
+                                    //  inside of a keydown (ex, enter+shift) trigger a complete re-render, which unmounts
+                                    //  an input. Because we already triggered a state change, we usually don't want to also
+                                    //  blur (which will trigger change handlers for inputs).
+                                    if (name === "blur") {
+                                        let target = args[0].currentTarget as HTMLElement;
+                                        if (!target.getAttribute("data-blur-on-unmount") && !target.isConnected) {
+                                            console.info("Ignoring blur for disconnected element. You can use data-blur-on-unmount to re-enable blurs on this element.", target);
+                                            return;
+                                        }
+                                    }
                                     let prevEvent = QRenderClass.eventComponentId;
                                     QRenderClass.eventComponentId = owner.id;
                                     try {

package/src/4-querysub/Querysub.ts

@@ -21,7 +21,7 @@ import { getCurrentCallAllowUndefined, getCurrentCall, CallSpec, PathFunctionRun
 import { listenOnDebugger } from "../diagnostics/listenOnDebugger";
 import { logErrors } from "../errors";
 import { getLastPathPart, getPathIndexAssert, getPathStr2, hack_setPackedPathSuffix } from "../path";
-import { QuerysubController, flushDelayedFunctions, onCallPredict, waitUntilAllPredictionsFinish } from "./QuerysubController";
+import { QuerysubController, anyPredictionsPending, flushDelayedFunctions, onCallPredict, waitUntilAllPredictionsFinish } from "./QuerysubController";
 import { PermissionsCheck } from "./permissions";
 import { inlineNestedCalls, syncSchema } from "../3-path-functions/syncSchema";
 import type { identityStorageKey, IdentityStorageType } from "../-a-auth/certs";
@@ -344,6 +344,11 @@ export class Querysub {
     public static onCommitFinished(callback: () => void) {
         proxyWatcher.getTriggeredWatcher().onInnerDisposed.push(callback);
     }
+    public static onCommitFinishedCommit(callback: () => void) {
+        this.onCommitFinished(() => {
+            Querysub.commit(callback);
+        });
+    }
 
     /** A more powerful version of omCommitFinished, which even waits for call predictions (or tries to).
      *      - Also see afterPredictionsSynced, which runs the callback in a write.
@@ -385,6 +390,14 @@ export class Querysub {
      *      (such as if code is still loading).
      */
     public static waitUntilAllPredictionsFinished = () => waitUntilAllPredictionsFinish();
+    /** Useful to prevent in-progress state from showing temporarily. */
+    public static waitForPredictionsSynced = () => {
+        if (anyPredictionsPending()) {
+            proxyWatcher.triggerOnPromiseFinish(Querysub.waitUntilAllPredictionsFinished(), {
+                waitReason: "Waiting for predictions to finish",
+            });
+        }
+    };
     public static onCommitPredictFinished = this.onCallPredict;
 
     public static getOwnMachineId = getOwnMachineId;

package/src/4-querysub/QuerysubController.ts

@@ -42,7 +42,7 @@ setFlag(require, "preact", "allowclient", true);
 
 import yargs from "yargs";
 import { mergeFilterables, parseFilterable, serializeFilterable } from "../misc/filterable";
-import { isManagementUser } from "../-0-hooks/hooks";
+import { isManagementUser, onAllPredictionsFinished } from "../-0-hooks/hooks";
 import { isLocal } from "../config";
 
 let yargObj = isNodeTrue() && yargs(process.argv)
@@ -157,6 +157,8 @@ let pendingPredictedCalls = new Map<string, {
     obj: PromiseObj;
     seqNum: number;
 }>();
+export const debug_pendingPredictedCalls = pendingPredictedCalls;
+
 export function callWaitOn(callId: string, promise: Promise<unknown>) {
     let waitObj = pendingPredictedCalls.get(callId);
     if (!waitObj) return;
@@ -205,13 +207,24 @@ export async function onCallPredict(call: CallSpec | undefined) {
     if (!call) return;
     await pendingPredictedCalls.get(call.CallId)?.obj.promise;
 }
+export function anyPredictionsPending() {
+    return Array.from(pendingPredictedCalls.values()).some(obj => !obj.obj.resolved && !obj.obj.rejected);
+}
+export const debug_anyPredictionsPending = anyPredictionsPending;
 export async function waitUntilAllPredictionsFinish() {
-    try {
-        await Promise.allSettled(Array.from(pendingPredictedCalls.values()).map(obj => obj.obj.promise));
-    } catch {
+    while (anyPredictionsPending()) {
+        try {
+            await Promise.allSettled(Array.from(pendingPredictedCalls.values()).map(obj => obj.obj.promise));
+        } catch {
+        }
     }
 }
 
+onAllPredictionsFinished.declare(() => {
+    if (!anyPredictionsPending()) return undefined;
+    return waitUntilAllPredictionsFinish();
+});
+
 
 export async function flushDelayedFunctions() {
     await prediction.flushDelayedFunctions();

package/src/4-querysub/querysubPrediction.ts

@@ -21,6 +21,7 @@ import { FunctionMetadata } from "../3-path-functions/syncSchema";
 import { isNode, nextId, sort } from "socket-function/src/misc";
 import { getBrowserUrlNode } from "../-f-node-discovery/NodeDiscovery";
 import { isLocal } from "../config";
+import { onAllPredictionsFinished } from "../-0-hooks/hooks";
 setFlag(require, "cbor-x", "allowclient", true);
 const cborEncoder = lazy(() => new cbor.Encoder({ structuredClone: true }));
 
@@ -98,6 +99,7 @@ export function flushDelayedFunctions() {
     }
 }
 
+
 export const addCall = runInSerial(async function addCall(call: CallSpec, metadata: FunctionMetadata) {
     const nodeId = await querysubNodeId();
     if (!nodeId) throw new Error("No querysub node found");

package/src/library-components/Input.tsx

@@ -23,6 +23,8 @@ export type InputProps = (
         inputRef?: (x: HTMLInputElement | null) => void;
         /** Don't blur on enter key */
         noEnterKeyBlur?: boolean;
+        /** Don't commit on shift+enter key */
+        noEnterKeyCommit?: boolean;
         noFocusSelect?: boolean;
         inputKey?: string;
         fillWidth?: boolean;
@@ -212,7 +214,7 @@ export class Input extends qreact.Component<InputProps> {
                         callback?.(e as unknown as preact.JSX.TargetedInputEvent<HTMLInputElement>);
                     }
                 }
-                let { noEnterKeyBlur, onInput, onChange } = props;
+                let { noEnterKeyBlur, noEnterKeyCommit, onInput, onChange } = props;
                 // Detach from the synced function, to prevent double calls. This is important, as apparently .blur()
                 //  synchronously triggers onChange, BUT, only if the input is changing the first time. Which means
                 //  if this function reruns, it won't trigger the change again. Detaching it causes any triggered
@@ -236,21 +238,7 @@ export class Input extends qreact.Component<InputProps> {
                     }
                     if (!noEnterKeyBlur && e.code === "Enter" && (!textarea || e.shiftKey || e.ctrlKey)) {
                         e.currentTarget.blur();
-                    } else if (
-                        e.ctrlKey && (
-                            // No need to commit on on paste or cut. If they want to commit, they can commit like they usually
-                            //  do. This shortcut only marginally affects a few workflows, and has the potential to break many others,
-                            //  so... let's not.
-                            // // Pasting and cutting might not mean commit, but... they probably mean for it to...
-                            // e.code === "KeyV" ||
-                            // e.code === "KeyX" ||
-
-                            // Ctrl+enter means "commit"
-                            e.code === "Enter"
-                        )
-                        // Shift+enter means "commit"
-                        || e.shiftKey && e.code === "Enter"
-                    ) {
+                    } else if (!noEnterKeyCommit && e.code === "Enter" && (e.ctrlKey || e.shiftKey)) {
                         Querysub.serviceWriteDetached(() => {
                             onChange?.(e);
                         });

package/src/library-components/InputLabel.tsx

@@ -137,7 +137,7 @@ export class InputLabel extends qreact.Component<InputLabelProps> {
             style={style}
         />;
         if (props.edit && !this.state.editting) {
-            input = <span class={css.hbox(2) + " trigger-hover"}>
+            input = <span class={css.hbox(2).overflowHidden + " trigger-hover"}>
                 <span class={props.editClass}>
                     {props.editValue ?? props.value}
                 </span>

package/src/library-components/InputPicker.tsx

@@ -27,6 +27,7 @@ export class InputPicker<T> extends qreact.Component<{
     addPicked: (value: T) => void;
     removePicked: (value: T) => void;
     allowNonOptions?: boolean;
+    paletteOptions?: boolean;
 }> {
     state = {
         pendingText: "",
@@ -61,31 +62,38 @@ export class InputPicker<T> extends qreact.Component<{
         pendingMatches = pendingMatches.slice(0, 10);
         extra -= pendingMatches.length;
         return (
-            <div class={css.hbox(10).alignItems("start")}>
-                {this.props.label}
-                <Input
-                    value={this.state.pendingText}
-                    hot
-                    alwaysUseLatestValueWhenFocused
-                    onChangeValue={(x) => this.state.pendingText = x}
-                    onFocus={() => this.state.focused = true}
-                    onBlur={() => {
-                        this.state.focused = false;
-                        this.state.pendingText = "";
-                    }}
-                    onKeyDown={e => {
-                        // On tab, add first in pendingMatches
-                        if (e.key === "Tab") {
-                            e.preventDefault();
-                            if (pendingMatches.length > 0) {
-                                this.props.addPicked(pendingMatches[0].value);
-                                this.state.pendingText = "";
+            <div class={css.hbox(10).alignItems("start").relative}>
+                <div class={css.hbox(10).pad2(0, 3)}>
+                    <div className={css.flexShrink0}>
+                        {this.props.label}
+                    </div>
+                    <Input
+                        value={this.state.pendingText}
+                        hot
+                        alwaysUseLatestValueWhenFocused
+                        onChangeValue={(x) => this.state.pendingText = x}
+                        onFocus={() => this.state.focused = true}
+                        onBlur={() => {
+                            this.state.focused = false;
+                            this.state.pendingText = "";
+                        }}
+                        onKeyDown={e => {
+                            // On enter, add first in pendingMatches
+                            if (e.key === "Enter") {
+                                e.preventDefault();
+                                if (pendingMatches.length > 0) {
+                                    this.props.addPicked(pendingMatches[0].value);
+                                    this.state.pendingText = "";
+                                }
                             }
-                        }
-                    }}
-                />
+                        }}
+                    />
+                </div>
                 {pendingMatches.length > 0 && (
-                    <div class={css.hbox(4).wrap}>
+                    <div class={
+                        css.hbox(4).wrap
+                        + (this.props.paletteOptions && css.absolute.pos(0, "100%").zIndex(1).hsla(0, 0, 0, 0.5).pad2(4))
+                    }>
                         {pendingMatches.map((option) => (
                             <Button
                                 key={`add-${option.matchText}`}

package/src/library-components/loadingIndicator.tsx

@@ -5,14 +5,22 @@ import { formatNumber, formatTime } from "socket-function/src/formatting/format"
 
 export class UnsyncedIndicator extends qreact.Component {
     lastSynced = Date.now();
+    wasSyncedLast = false;
     render() {
         let unsynced = Querysub.watchUnsyncedComponents();
         let unsyncedCount = unsynced.size;
         if (unsyncedCount === 0) {
             this.lastSynced = Date.now();
+            this.wasSyncedLast = true;
             return undefined;
         }
-        let timeSinceLastSync = Date.now() - this.lastSynced;
+        // If we were synced in the last render, then we actually were just synced, so...
+        //  set synced to now.
+        if (this.wasSyncedLast) {
+            this.wasSyncedLast = false;
+            this.lastSynced = Date.now();
+        }
+        let timeSinceLastSync = Querysub.timeDelayed(2000) - this.lastSynced;
         if (timeSinceLastSync < 1500) {
             return undefined;
         }

package/src/promise.ts

@@ -9,7 +9,7 @@ export class PromiseObj<T = void> {
             this.resolve = resolve;
             this.reject = reject;
         });
-        this.promise.finally(() => this.resolved = true);
+        void this.promise.finally(() => this.resolved = true);
         this.promise.catch(() => this.rejected = true);
     }
 }