@arrai-innovations/reactive-helpers 11.0.5 → 11.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arrai-innovations/reactive-helpers",
-    "version": "11.0.5",
+    "version": "11.2.0",
     "description": "VueJS 3 utility composition functions to help manipulate objects and lists.",
     "main": "index.js",
     "type": "module",

package/tests/unit/use/listFilter.spec.js

@@ -1,6 +1,6 @@
 import { useListFilters, useListSort } from "../../../use/index.js";
 import { doAwaitNot } from "../../../utils/watches.js";
-import { ref, unref, reactive } from "vue";
+import { reactive, ref, unref } from "vue";
 import { deepUnref } from "vue-deepunref";
 
 describe("use/listFilter", () => {
@@ -122,6 +122,10 @@ describe("use/listFilter", () => {
         const filter = useListFilter({
             parentState: listInstance.state,
         });
+        await doAwaitNot({
+            obj: filter.state,
+            prop: "running",
+        });
         expect(filter.state.objects).toEqual(listInstance.state.objects);
     });
     describe("useListFilter operates on parentState modified by useListSort", () => {
@@ -373,10 +377,6 @@ describe("use/listFilter", () => {
             parentState: filter1.state,
             allowedFilter: filter2AllowedFilter,
         });
-        await doAwaitNot({
-            obj: filter1.state,
-            prop: "running",
-        });
         await doAwaitNot({
             obj: filter2.state,
             prop: "running",
@@ -386,10 +386,6 @@ describe("use/listFilter", () => {
         expect(filter2.state.objects).toEqual({});
         expect(filter2.state.order).toEqual([]);
         list.addListObject({ id: 1, name: "one", has_things: true, has_stuff: true, has_other_stuff: true });
-        await doAwaitNot({
-            obj: filter1.state,
-            prop: "running",
-        });
         await doAwaitNot({
             obj: filter2.state,
             prop: "running",
@@ -403,10 +399,6 @@ describe("use/listFilter", () => {
         });
         expect(filter2.state.order).toEqual(["1"]);
         list.addListObject({ id: 2, name: "two", has_things: true, has_stuff: true, has_other_stuff: false });
-        await doAwaitNot({
-            obj: filter1.state,
-            prop: "running",
-        });
         await doAwaitNot({
             obj: filter2.state,
             prop: "running",
@@ -421,10 +413,6 @@ describe("use/listFilter", () => {
         });
         expect(filter2.state.order).toEqual(["1"]);
         list.addListObject({ id: 3, name: "three", has_things: true, has_stuff: false, has_other_stuff: true });
-        await doAwaitNot({
-            obj: filter1.state,
-            prop: "running",
-        });
         await doAwaitNot({
             obj: filter2.state,
             prop: "running",
@@ -439,10 +427,6 @@ describe("use/listFilter", () => {
         });
         expect(filter2.state.order).toEqual(["1"]);
         list.addListObject({ id: 4, name: "four", has_things: true, has_stuff: false, has_other_stuff: false });
-        await doAwaitNot({
-            obj: filter1.state,
-            prop: "running",
-        });
         await doAwaitNot({
             obj: filter2.state,
             prop: "running",
@@ -458,10 +442,6 @@ describe("use/listFilter", () => {
         expect(filter2.state.order).toEqual(["1"]);
         list.state.objects[1].has_stuff = false;
         list.state.objects[2].has_other_stuff = true;
-        await doAwaitNot({
-            obj: filter1.state,
-            prop: "running",
-        });
         await doAwaitNot({
             obj: filter2.state,
             prop: "running",
@@ -478,10 +458,6 @@ describe("use/listFilter", () => {
         list.addListObject({ id: 6, name: "six", has_things: true, has_stuff: true, has_other_stuff: false });
         list.addListObject({ id: 7, name: "seven", has_things: false, has_stuff: true, has_other_stuff: true });
         list.addListObject({ id: 8, name: "eight", has_things: true, has_stuff: true, has_other_stuff: true });
-        await doAwaitNot({
-            obj: filter1.state,
-            prop: "running",
-        });
         await doAwaitNot({
             obj: filter2.state,
             prop: "running",

package/tests/unit/use/listInstance.spec.js

@@ -3,7 +3,7 @@ import { expectErrorToBeNull } from "../expectHelpers.js";
 import flushPromises from "flush-promises";
 import keyBy from "lodash-es/keyBy.js";
 import { inspect } from "util";
-import { isReactive, nextTick, reactive } from "vue";
+import { isReactive, nextTick, reactive, isRef, isReadonly } from "vue";
 
 afterAll(() => {
     vi.restoreAllMocks();
@@ -16,6 +16,7 @@ describe("use/listInstance.spec.js", function () {
         const listCrud = await import("../../../config/listCrud.js");
         const imported = await import("../../../use/listInstance");
         globalList = vi.fn();
+        globalList.cancel = vi.fn();
         listCrud.setListCrud({
             list: globalList,
             args: { stream: "test_stream" },
@@ -128,6 +129,7 @@ describe("use/listInstance.spec.js", function () {
                 listArgs: { user: 1 },
                 retrieveArgs: { fields: fields },
                 pageCallback: passedPageCallback,
+                isCancelled: expect.any(Object), // ref
             });
             expect(globalList).toHaveBeenCalledTimes(1);
         });
@@ -153,6 +155,7 @@ describe("use/listInstance.spec.js", function () {
                 listArgs: { user: 1 },
                 retrieveArgs: { fields: fields },
                 pageCallback: expect.any(Function),
+                isCancelled: expect.any(Object), // ref
             });
             expect(globalList).toHaveBeenCalledTimes(1);
             expectErrorToBeNull(listInstance.state.error);
@@ -207,6 +210,7 @@ describe("use/listInstance.spec.js", function () {
                 listArgs: { user: 1 },
                 retrieveArgs: { fields: fields },
                 pageCallback: passedPageCallback,
+                isCancelled: expect.any(Object), // ref
             });
             expect(globalList).toHaveBeenCalledTimes(1);
         });
@@ -272,6 +276,7 @@ describe("use/listInstance.spec.js", function () {
                 listArgs: { user: 1 },
                 retrieveArgs: { fields: fields },
                 pageCallback: passedPageCallback,
+                isCancelled: expect.any(Object), // ref
             });
             expect(globalList).toHaveBeenCalledTimes(1);
         });
@@ -318,6 +323,7 @@ describe("use/listInstance.spec.js", function () {
                 listArgs: { user: 1 },
                 retrieveArgs: { fields: fields },
                 pageCallback: passedPageCallback,
+                isCancelled: expect.any(Object), // ref
             });
             expect(globalList).toHaveBeenCalledTimes(1);
 
@@ -381,7 +387,7 @@ describe("use/listInstance.spec.js", function () {
             listInstance.addListObject(listObject);
             expect(() => listInstance.addListObject({ listObject })).toThrowError(ListError);
         });
-        it("succeeded", function () {
+        it("succeeded", async function () {
             const listInstance = useListInstance({ props: {} });
             const newId = listInstance.getFakeId();
             listObject.id = newId;
@@ -389,6 +395,18 @@ describe("use/listInstance.spec.js", function () {
             expect(listInstance.state.objects[newId]).toEqual(listObject);
             const reactiveProxy = listInstance.state.objects[newId];
             expect(isReactive(reactiveProxy)).toBe(true);
+            expect(reactiveProxy.id).toBe(newId);
+            expect(reactiveProxy.__str__).toBe("nvm");
+            expect(reactiveProxy.name).toBe("nvm");
+            expect(listInstance.state.objectsInOrder).toEqual([]);
+            // order updates immediately due to not being proxied through objectsInOrderRefs
+            expect(listInstance.state.order).toStrictEqual([newId.toString()]);
+            await doAwaitNot({
+                obj: listInstance.state,
+                prop: "running",
+            });
+            expect(listInstance.state.objectsInOrder).toEqual([reactiveProxy]);
+            expect(listInstance.state.order).toEqual([newId.toString()]);
         });
     });
     describe("updateListObject", function () {
@@ -401,7 +419,7 @@ describe("use/listInstance.spec.js", function () {
         });
         it("succeeds", async function () {
             const listInstance = useListInstance({
-                props: { listArgs: { user: 1 }, retrieveArgs: { fields: fields } },
+                props: {},
             });
             let crudListResolve;
             const crudListPromise = new Promise((resolve) => {
@@ -418,10 +436,70 @@ describe("use/listInstance.spec.js", function () {
             passedPageCallback(crudListResolvedPage1);
             crudListResolve();
 
+            await doAwaitNot({
+                obj: listInstance.state,
+                prop: "running",
+            });
+
             let updateObject = listInstance.state.objects["1"];
             updateObject.name = "updated";
             listInstance.updateListObject(updateObject);
             expect(listInstance.state.objects["1"]).toEqual(updateObject);
+            expect(listInstance.state.objectsInOrder[0].name).toBe("updated");
+            await doAwaitNot({
+                obj: listInstance.state,
+                prop: "running",
+            });
+            expect(listInstance.state.objectsInOrder[0].name).toBe("updated");
+        });
+    });
+    describe("deleteListObject", function () {
+        it("errors", function () {
+            const listInstance = useListInstance({ props: {} });
+            expect(() => listInstance.deleteListObject(-50002000)).toThrowError(ListError);
+        });
+        it("succeeds", async function () {
+            const listInstance = useListInstance({
+                props: {},
+            });
+            let crudListResolve;
+            const crudListPromise = new Promise((resolve) => {
+                crudListResolve = resolve;
+            });
+            let passedPageCallback;
+            globalList.mockImplementation(({ pageCallback }) => {
+                passedPageCallback = pageCallback;
+                return crudListPromise;
+            });
+
+            listInstance.list();
+
+            passedPageCallback(crudListResolvedPage1);
+            crudListResolve();
+
+            await doAwaitNot({
+                obj: listInstance.state,
+                prop: "running",
+            });
+
+            listInstance.deleteListObject(1);
+            expect(listInstance.state.objects["1"]).toBeUndefined();
+            expect(listInstance.state.objectsInOrder).toStrictEqual([
+                undefined,
+                crudListResolvedObjects1["2"],
+                crudListResolvedObjects1["3"],
+            ]);
+            // order updates immediately due to not being proxied through objectsInOrderRefs
+            expect(listInstance.state.order).toStrictEqual(["2", "3"]);
+            await doAwaitNot({
+                obj: listInstance.state,
+                prop: "running",
+            });
+            expect(listInstance.state.objectsInOrder).toEqual([
+                crudListResolvedObjects1["2"],
+                crudListResolvedObjects1["3"],
+            ]);
+            expect(listInstance.state.order).toEqual(["2", "3"]);
         });
     });
     describe("getFakeId", function () {
@@ -488,4 +566,39 @@ describe("use/listInstance.spec.js", function () {
         expect(listInstance.state.order).toEqual(crudListResolvedPage3.map((e) => e.id.toString()));
         expect(listInstance.state.objectsInOrder).toEqual(crudListResolvedPage3);
     });
+    describe("list promise cancellation", function () {
+        it("cancels and sets isCancelled", async function () {
+            let myListFnCancelResolve, passedIsCancelled;
+            const myListFn = vi.fn().mockImplementation(({ isCancelled }) => {
+                passedIsCancelled = isCancelled;
+                const promise = new Promise(() => {});
+                promise.cancel = async () => {
+                    await new Promise((resolve) => {
+                        myListFnCancelResolve = resolve;
+                    });
+                };
+                return promise;
+            });
+            const listInstance = useListInstance({
+                props: {},
+                functions: {
+                    list: myListFn,
+                },
+            });
+
+            const cancelablePromise = listInstance.list();
+
+            expect(passedIsCancelled).toBeTruthy();
+            expect(isRef(passedIsCancelled)).toBe(true);
+            expect(isReadonly(passedIsCancelled)).toBe(true);
+            expect(passedIsCancelled.value).toBe(false);
+            expect(cancelablePromise.cancel).toBeTruthy();
+
+            const cancelPromise = cancelablePromise.cancel();
+            myListFnCancelResolve();
+            await cancelPromise;
+
+            expect(passedIsCancelled.value).toBe(true);
+        });
+    });
 });

package/tests/unit/use/listSort.spec.js

@@ -1,4 +1,4 @@
-import { doAwaitTimeout, doAwaitNot } from "../../../utils/index.js";
+import { doAwaitNot, doAwaitTimeout } from "../../../utils/index.js";
 import { reactive, ref } from "vue";
 import { deepUnref } from "vue-deepunref";
 
@@ -13,8 +13,7 @@ describe("use/useListSort", () => {
         useListFilter,
         useListSort,
         useListSorts,
-        setListSortDefaultOptions,
-        AwaitNot;
+        setListSortDefaultOptions;
     const contactsResolved = [
         {
             id: 15,
@@ -65,20 +64,17 @@ describe("use/useListSort", () => {
         setListSortDefaultOptions({
             sortThrottleWait: 0,
         });
-        const importedUtils = await import("../../../utils");
-        AwaitNot = importedUtils.AwaitNot;
     });
 
     afterEach(() => vi.resetAllMocks());
 
     const waitForListSort = async (listSort) => {
-        const anr = new AwaitNot({
+        await doAwaitNot({
             obj: listSort.state,
             prop: "running",
             timeout: 2000,
+            couldAlreadyBeFalse: false,
         });
-        anr.start();
-        await anr.promise;
     };
 
     it("generates initial values from inputs", () => {
@@ -106,6 +102,10 @@ describe("use/useListSort", () => {
             for (const contact of contactsResolved) {
                 listInstance.addListObject(contact);
             }
+            await doAwaitNot({
+                obj: listInstance.state,
+                prop: "running",
+            });
             const listSort = useListSort({ parentState: listInstance.state, orderByRules });
             // sorts immediately
             expect(listSort.state.order).toEqual(testOrder1);

package/tests/unit/use/listSubscription.spec.js

@@ -142,7 +142,6 @@ describe("use/listSubscription.spec.js", function () {
                 obj: listSubscription.subscribeIntent.state,
                 prop: "active",
             });
-            expect(crudSubscribeResolvable[0].promise.cancel).toHaveBeenCalledWith();
             expect(crudSubscribeResolvable[0].promise.cancel).toHaveBeenCalledTimes(1);
             expect(returnValue).toBe(true);
 
@@ -288,7 +287,6 @@ describe("use/listSubscription.spec.js", function () {
             crudSubscribeResolvable[0].cancel.resolve(true);
             const returnValue = await unsubscribe;
             await poll(() => !listSubscription.state.subscribed);
-            expect(crudSubscribeResolvable[0].promise.cancel).toHaveBeenCalledWith();
             expect(crudSubscribeResolvable[0].promise.cancel).toHaveBeenCalledTimes(1);
             expect(returnValue).toBe(true);
             expect(listSubscription.state.subscribed).toBe(false);
@@ -322,7 +320,6 @@ describe("use/listSubscription.spec.js", function () {
             crudSubscribeResolvable[0].cancel.resolve(true);
             const returnValue = await unsubscribePromise;
             await poll(() => !listSubscription.state.subscribed);
-            expect(crudSubscribeResolvable[0].promise.cancel).toHaveBeenCalledWith();
             expect(crudSubscribeResolvable[0].promise.cancel).toHaveBeenCalledTimes(1);
             expect(returnValue).toBe(true);
             expect(listSubscription.state.subscribed).toBe(false);
@@ -382,7 +379,6 @@ describe("use/listSubscription.spec.js", function () {
             crudSubscribeResolvable[0].cancel.resolve(true);
             const returnValue = await unsubscribePromise;
             await poll(() => !listSubscription.state.subscribed);
-            expect(crudSubscribeResolvable[0].promise.cancel).toHaveBeenCalledWith();
             expect(crudSubscribeResolvable[0].promise.cancel).toHaveBeenCalledTimes(1);
             expect(returnValue).toBe(true);
             expect(listSubscription.state.subscribed).toBe(false);
@@ -455,7 +451,6 @@ describe("use/listSubscription.spec.js", function () {
             crudSubscribeResolvable[0].cancel.resolve(true);
             const returnValue = await unsubscribePromise;
             await poll(() => !listSubscription.state.subscribed);
-            expect(crudSubscribeResolvable[0].promise.cancel).toHaveBeenCalledWith();
             expect(crudSubscribeResolvable[0].promise.cancel).toHaveBeenCalledTimes(1);
             expect(returnValue).toBe(true);
             expect(listSubscription.state.subscribed).toBe(false);
@@ -508,7 +503,6 @@ describe("use/listSubscription.spec.js", function () {
             await crudSubscribeResolvable[1].resolve();
             await crudListResolvable[1].resolve();
             await poll(() => listSubscription.state.subscribed);
-            expect(crudSubscribeResolvable[0].promise.cancel).toHaveBeenCalledWith();
             expect(crudSubscribeResolvable[0].promise.cancel).toHaveBeenCalledTimes(1);
 
             expect(crudSubscribe).toHaveBeenCalledTimes(2);
@@ -518,7 +512,6 @@ describe("use/listSubscription.spec.js", function () {
             const returnValue = await unsubscribePromise;
             expect(returnValue).toBe(true);
             await poll(() => !listSubscription.state.subscribed);
-            expect(crudSubscribeResolvable[1].promise.cancel).toHaveBeenCalledWith();
             expect(crudSubscribeResolvable[1].promise.cancel).toHaveBeenCalledTimes(1);
             expect(listSubscription.state.subscribed).toBe(false);
         });

package/use/cancellableIntent.js

@@ -54,7 +54,7 @@ export function useCancellableIntent({
         return false;
     }
 
-    const doIntentWatch = async () => {
+    const doIntentWatch = () => {
         state.errored = false;
         state.error = null;
         if (state.activeCount === undefined) {
@@ -127,13 +127,13 @@ export function useCancellableIntent({
         }
     };
 
-    const guardWatch = async () => {
+    const guardWatch = () => {
         if (delayedWatch) {
             // if all guards are false, run the watch
             if (Object.values(guardArguments).every((x) => !x)) {
                 const myDelayedWatch = delayedWatch;
                 delayedWatch = null;
-                await myDelayedWatch();
+                myDelayedWatch();
             }
         }
     };

package/use/listCalculated.js

@@ -1,12 +1,13 @@
-import { keyDiff, loadingCombine, difference } from "../utils/index.js";
+import { difference, keyDiff, loadingCombine } from "../utils/index.js";
+import { proxyRunning } from "../utils/proxyRunning.js";
 import {
-    listRelatedStateKeys,
-    listSubscriptionStateKeys,
-    listInstanceStateKeys,
-    listFilterStateKeys,
     listCalculatedStateKeys,
-    listSortStateKeys,
+    listFilterStateKeys,
+    listInstanceStateKeys,
+    listRelatedStateKeys,
     listSearchStateKeys,
+    listSortStateKeys,
+    listSubscriptionStateKeys,
 } from "./listKeys.js";
 import { useWatchesRunning } from "./watchesRunning.js";
 import isEmpty from "lodash-es/isEmpty.js";
@@ -145,7 +146,9 @@ export function useListCalculated({ parentState, calculatedObjectsRules }) {
         });
 
         state.calculatedRunning = toRef(watchesRunning.state, "running");
-        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
+        const parentRunning = ref(undefined);
+        proxyRunning(parentState, "running", parentRunning);
+        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentRunning.value));
 
         onScopeDispose(() => {
             for (const objectKey of Object.keys(calculatedObjectsEffectScopes)) {

package/use/listFilter.js

@@ -1,15 +1,16 @@
 import { assignReactiveObject, difference, loadingCombine } from "../utils/index.js";
 import { keyDiff } from "../utils/keyDiff.js";
+import { proxyRunning } from "../utils/proxyRunning.js";
 import {
-    listSortStateKeys,
-    listFilterStateKeys,
-    listRelatedStateKeys,
     listCalculatedStateKeys,
-    listSubscriptionStateKeys,
+    listFilterStateKeys,
     listInstanceStateKeys,
+    listRelatedStateKeys,
     listSearchStateKeys,
+    listSortStateKeys,
+    listSubscriptionStateKeys,
 } from "./listKeys.js";
-import { effectScope, reactive, toRef, watch, unref, computed, nextTick } from "vue";
+import { computed, effectScope, nextTick, reactive, ref, toRef, unref, watch } from "vue";
 
 const parentStateKeys = difference(
     new Set([
@@ -71,9 +72,6 @@ export function useListFilter({ parentState, allowedFilter, excludedFilter }) {
         previousExcludedFilter = null;
 
     const objectsWatch = () => {
-        if (parentState.running) {
-            return;
-        }
         state.objectsWatchRunning = true;
         const allowedOrExcludedFilterChanged =
             allowedFilter !== previousAllowedFilter || excludedFilter !== previousExcludedFilter;
@@ -155,8 +153,10 @@ export function useListFilter({ parentState, allowedFilter, excludedFilter }) {
             state[key] = toRef(parentState, key);
         }
 
+        const parentRunning = ref(undefined);
+        proxyRunning(parentState, "running", parentRunning);
         state.running = computed(() => {
-            return loadingCombine(parentState.running, state.objectsWatchRunning, state.resultsWatchRunning);
+            return loadingCombine(parentRunning.value, state.objectsWatchRunning, state.resultsWatchRunning);
         });
 
         watch(toRef(state, "inResults"), resultsWatch, { deep: true });

package/use/listInstance.js

@@ -2,7 +2,7 @@ import { getListCrud } from "../config/listCrud.js";
 import { assignReactiveObject } from "../utils/assignReactiveObject.js";
 import { getFakeId } from "../utils/getFakeId.js";
 import inspect from "browser-util-inspect";
-import { effectScope, reactive, toRef, watch, computed, unref } from "vue";
+import { effectScope, reactive, toRef, watch, computed, unref, ref, readonly } from "vue";
 
 export class ListError extends Error {
     constructor(message, code) {
@@ -100,6 +100,9 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
         },
         set(target, prop, value) {
             target.set(prop, value); // map.set() returns the map, we don't need that
+            if (!state.running) {
+                state.running = true;
+            }
             return true;
         },
         ownKeys(target) {
@@ -135,6 +138,7 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
         listArgs: toRef(props, "listArgs"),
         objects: _objectsProxy,
         loading: undefined,
+        running: false,
         errored: false,
         error: null,
         order: [],
@@ -178,16 +182,19 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
         state.loading = true;
         state.errored = false;
         state.error = null;
+        const isCancelled = ref(false);
         const listPromise = state.crud.list({
             crudArgs: state.crud.args,
             retrieveArgs: state.retrieveArgs,
             listArgs: state.listArgs,
             pageCallback: returnedObject.pageCallback,
+            isCancelled: readonly(isCancelled),
         });
         let resolveState = false;
         if (listPromise.cancel) {
             promises.list.cancel = async () => {
                 let promise = listPromise.cancel();
+                isCancelled.value = true;
                 if (promise) {
                     await promise;
                 }
@@ -218,6 +225,9 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
             throw new ListError(`addListObject: list already has object for id: ${inspect(object.id)}`, "duplicate-id");
         }
         state.objects[object.id] = object;
+        if (!state.running) {
+            state.running = true;
+        }
     }
 
     function updateListObject(object) {
@@ -231,6 +241,9 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
             );
         }
         assignReactiveObject(state.objects[object.id], object);
+        if (!state.running) {
+            state.running = true;
+        }
     }
 
     function deleteListObject(objectId) {
@@ -241,6 +254,9 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
             );
         }
         delete state.objects[objectId];
+        if (!state.running) {
+            state.running = true;
+        }
     }
 
     function clearList() {
@@ -265,6 +281,9 @@ export function useListInstance({ props, functions = {}, keepOldPages = false })
                     state.objectsInOrderRefs,
                     Object.keys(state.objects).map((id) => toRef(state.objects, id))
                 );
+                if (state.running) {
+                    state.running = false;
+                }
             },
             {
                 immediate: true,

package/use/listKeys.js

@@ -4,6 +4,7 @@ export const listInstanceStateKeys = [
     "listArgs",
     "objects",
     "loading",
+    "running",
     "errored",
     "error",
     "objectsInOrder",

package/use/listRelated.js

@@ -1,15 +1,16 @@
 import { keyDiff } from "../utils/keyDiff.js";
 import { loadingCombine } from "../utils/loadingCombine.js";
+import { proxyRunning } from "../utils/proxyRunning.js";
 import { getObjectRelatedByKey } from "../utils/relatedCalculatedHelpers.js";
 import { difference } from "../utils/set.js";
 import {
-    listSubscriptionStateKeys,
-    listInstanceStateKeys,
-    listRelatedStateKeys,
     listCalculatedStateKeys,
-    listSortStateKeys,
     listFilterStateKeys,
+    listInstanceStateKeys,
+    listRelatedStateKeys,
     listSearchStateKeys,
+    listSortStateKeys,
+    listSubscriptionStateKeys,
 } from "./listKeys.js";
 import { useWatchesRunning } from "./watchesRunning.js";
 import get from "lodash-es/get.js";
@@ -17,7 +18,7 @@ import identity from "lodash-es/identity.js";
 import isArray from "lodash-es/isArray.js";
 import isEmpty from "lodash-es/isEmpty.js";
 import isUndefined from "lodash-es/isUndefined.js";
-import { computed, effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
+import { computed, effectScope, onScopeDispose, reactive, ref, toRef, unref, watch } from "vue";
 
 const parentStateKeys = difference(
     new Set([
@@ -198,7 +199,9 @@ export function useListRelated({ parentState, relatedObjectsRules }) {
         });
 
         state.relatedRunning = toRef(watchesRunning.state, "running");
-        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
+        const parentRunning = ref(undefined);
+        proxyRunning(parentState, "running", parentRunning);
+        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentRunning.value));
 
         onScopeDispose(() => {
             for (const objectKey of Object.keys(relatedObjectsEffectScopes)) {

package/use/listSearch.js

@@ -1,18 +1,19 @@
-import { difference, loadingCombine, assignReactiveObject, keyDiff } from "../utils/index.js";
+import { assignReactiveObject, difference, keyDiff, loadingCombine } from "../utils/index.js";
+import { proxyRunning } from "../utils/proxyRunning.js";
 import { getObjectRelatedCalculatedByKey } from "../utils/relatedCalculatedHelpers.js";
 import {
-    listInstanceStateKeys,
-    listSubscriptionStateKeys,
-    listRelatedStateKeys,
     listCalculatedStateKeys,
-    listSortStateKeys,
     listFilterStateKeys,
+    listInstanceStateKeys,
+    listRelatedStateKeys,
     listSearchStateKeys,
+    listSortStateKeys,
+    listSubscriptionStateKeys,
 } from "./listKeys.js";
 import { useSearch } from "./search.js";
 import get from "lodash-es/get.js";
 import isEqual from "lodash-es/isEqual.js";
-import { reactive, effectScope, toRef, computed, watch, unref, onScopeDispose } from "vue";
+import { computed, effectScope, onScopeDispose, reactive, ref, toRef, unref, watch } from "vue";
 import { deepUnref } from "vue-deepunref";
 
 const parentStateKeys = difference(
@@ -304,8 +305,10 @@ export function useListSearch({ parentState, props, throttle = 500, showAllWhenE
         textSearchIndex.state.search = toRef(state, "textSearchValue");
         textSearchIndex.events.addEventListener("newIndex", indexWasCleared);
         state.searched = toRef(() => textSearchIndex.state.searched);
+        const parentRunning = ref(undefined);
+        proxyRunning(parentState, "running", parentRunning);
         state.running = computed(() => {
-            return loadingCombine(parentState.running, state.newSearchComputeds, textSearchIndex.state.running);
+            return loadingCombine(parentRunning.value, state.newSearchComputeds, textSearchIndex.state.running);
         });
         state.objectsInOrder = computed(() => state.objectsInOrderRefs.map((ref) => unref(ref)));
 

package/use/listSort.js

@@ -1,12 +1,13 @@
-import { assignReactiveObject, keyDiff, loadingCombine, difference } from "../utils/index.js";
+import { assignReactiveObject, difference, keyDiff, loadingCombine } from "../utils/index.js";
+import { proxyRunning } from "../utils/proxyRunning.js";
 import {
-    listSortStateKeys,
-    listFilterStateKeys,
-    listRelatedStateKeys,
     listCalculatedStateKeys,
-    listSubscriptionStateKeys,
+    listFilterStateKeys,
     listInstanceStateKeys,
+    listRelatedStateKeys,
     listSearchStateKeys,
+    listSortStateKeys,
+    listSubscriptionStateKeys,
 } from "./listKeys.js";
 import { useWatchesRunning } from "./watchesRunning.js";
 import get from "lodash-es/get.js";
@@ -17,7 +18,7 @@ import isNull from "lodash-es/isNull.js";
 import isUndefined from "lodash-es/isUndefined.js";
 import throttle from "lodash-es/throttle.js";
 import zip from "lodash-es/zip.js";
-import { effectScope, reactive, toRef, unref, watch, computed } from "vue";
+import { computed, effectScope, reactive, ref, toRef, unref, watch } from "vue";
 
 const collator = new Intl.Collator(undefined, { numeric: true });
 
@@ -251,8 +252,10 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
 
         state.objectsInOrder = computed(() => state.objectsInOrderRefs.map((e) => unref(e)));
         state.sortRunning = computed(() => loadingCombine(watchesRunning.state.running, state.outstandingEffects));
+        const parentRunning = ref(undefined);
+        proxyRunning(parentState, "running", parentRunning);
         state.running = computed(() =>
-            loadingCombine(watchesRunning.state.running, state.outstandingEffects, parentState.running)
+            loadingCombine(watchesRunning.state.running, state.outstandingEffects, parentRunning.value)
         );
     });
 

package/use/objectCalculated.js

@@ -1,3 +1,4 @@
+import { proxyRunning } from "../utils/index.js";
 import { keyDiff } from "../utils/keyDiff.js";
 import { loadingCombine } from "../utils/loadingCombine.js";
 import { objectInstanceStateKeys } from "./objectInstance.js";
@@ -5,7 +6,7 @@ import { objectRelatedStateKeys } from "./objectRelated.js";
 import { objectSubscriptionStateKeys } from "./objectSubscription.js";
 import { useWatchesRunning } from "./watchesRunning.js";
 import isEmpty from "lodash-es/isEmpty.js";
-import { computed, effectScope, onScopeDispose, reactive, toRef, watch } from "vue";
+import { computed, effectScope, onScopeDispose, reactive, ref, toRef, watch } from "vue";
 
 export const objectCalculatedStateKeys = [
     "calculatedObject",
@@ -99,7 +100,9 @@ export function useObjectCalculated({ parentState, calculatedObjectRules }) {
         });
 
         state.calculatedRunning = toRef(watchesRunning.state, "running");
-        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
+        const parentRunning = ref(undefined);
+        proxyRunning(parentState, "running", parentRunning);
+        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentRunning));
 
         onScopeDispose(() => {
             for (const key in calculatedObjectEffectScopes) {

package/use/objectRelated.js

@@ -1,4 +1,4 @@
-import { loadingCombine } from "../utils/index.js";
+import { loadingCombine, proxyRunning } from "../utils/index.js";
 import { keyDiff } from "../utils/keyDiff.js";
 import { objectInstanceStateKeys } from "./objectInstance.js";
 import { objectSubscriptionStateKeys } from "./objectSubscription.js";
@@ -9,7 +9,7 @@ import isArray from "lodash-es/isArray.js";
 import isEmpty from "lodash-es/isEmpty.js";
 import isEqual from "lodash-es/isEqual.js";
 import isUndefined from "lodash-es/isUndefined.js";
-import { computed, effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
+import { computed, effectScope, onScopeDispose, reactive, ref, toRef, unref, watch } from "vue";
 
 export const objectRelatedStateKeys = [
     "relatedObject",
@@ -129,7 +129,9 @@ export function useObjectRelated({ parentState, relatedObjectRules }) {
         });
 
         state.relatedRunning = toRef(watchesRunning.state, "running");
-        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
+        const parentRunning = ref(undefined);
+        proxyRunning(parentState, "running", parentRunning);
+        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentRunning));
 
         onScopeDispose(() => {
             for (const key in relatedObjectEffectScopes) {

package/utils/index.js

@@ -8,6 +8,7 @@ export * from "./getFakeId.js";
 export * from "./keyDiff.js";
 export * from "./lifecycleDebug.js";
 export * from "./loadingCombine.js";
+export * from "./proxyRunning.js";
 export * from "./relatedCalculatedHelpers.js";
 export * from "./set.js";
 export * from "./transformWalk.js";

package/utils/proxyRunning.js

@@ -0,0 +1,26 @@
+import { nextTick, toRef, watch } from "vue";
+
+export function proxyRunning(parentState, parentStateProp, state, prop) {
+    // we want you to have been running false for two ticks before we stop you, but we want you to start running true immediately
+    //  the point of this is to reduce running flicker where the stack has running states awaiting other running states
+    let falseTickCount = 0;
+    const checkStillFalse = () => {
+        if (falseTickCount > 1) {
+            state[prop] = false;
+            falseTickCount = 0;
+        } else if (parentState[parentStateProp] === false) {
+            falseTickCount++;
+            nextTick(checkStillFalse);
+        } else {
+            falseTickCount = 0;
+        }
+    };
+    watch(toRef(parentState, parentStateProp), (running) => {
+        if (running && state[prop] !== running) {
+            state[prop] = running;
+        } else if (!running && state[prop] !== running) {
+            nextTick(checkStillFalse);
+        }
+    });
+    state[prop] = parentState[parentStateProp];
+}

package/utils/watches.js

@@ -5,8 +5,11 @@ export class ImmediateStopWatch {
     constructor() {}
 
     // watchFuncArgs are for immediate call only.
-    start(watchSources, watchFunc, watchFuncArgs = []) {
-        this.stopWatch = watch(watchSources, watchFunc);
+    start(watchSources, watchFunc, watchFuncArgs = [], watchOptions = {}) {
+        if (watchOptions.immediate) {
+            throw new Error("ImmediateStopWatch is always immediate.");
+        }
+        this.stopWatch = watch(watchSources, watchFunc, watchOptions);
         watchFunc(...watchFuncArgs);
     }