@pinia/colada - npm Package Compare versions

Comparing version 0.4.2 to 0.4.3

dist/index.d.ts

 import * as vue from 'vue';
-import { Ref, ShallowRef, ComputedRef, App, MaybeRefOrGetter } from 'vue';
+import { Ref, ComputedRef, ShallowRef, App, MaybeRefOrGetter } from 'vue';
 import * as pinia from 'pinia';
@@ -62,2 +62,15 @@
 }
+/**
+ * Creates a delayed computed ref from an existing ref, computed, or getter. Use this to delay a loading state (`isFetching`, `isLoading`) to avoid flickering.
+ *
+ * @example
+ * ```ts
+ * const { isLoading: _isLoading } = useQuery({ queryKey: 'todos', queryFn: fetchTodos })
+ * const isLoading = delayLoadingRef(_isLoading, 300)
+ * ```
+ *
+ * @param refOrGetter - ref or getter to delay
+ * @param delay - delay in ms
+ */
+declare function delayLoadingRef(refOrGetter: Ref<boolean> | ComputedRef<boolean> | (() => boolean), delay?: number): ComputedRef<boolean>;
 
@@ -297,2 +310,2 @@ /**
 
-export { type EntryNodeKey, QueryPlugin, type QueryPluginOptions, TreeMapNode, USE_QUERY_DEFAULTS, type UseMutationOptions, type UseMutationReturn, type UseQueryEntry, type UseQueryKey, type UseQueryOptions, type UseQueryOptionsWithDefaults, type UseQueryReturn, type UseQueryStatus, serialize, useMutation, useQuery, useQueryCache };
+export { type EntryNodeKey, QueryPlugin, type QueryPluginOptions, TreeMapNode, USE_QUERY_DEFAULTS, type UseMutationOptions, type UseMutationReturn, type UseQueryEntry, type UseQueryKey, type UseQueryOptions, type UseQueryOptionsWithDefaults, type UseQueryReturn, type UseQueryStatus, delayLoadingRef, serialize, useMutation, useQuery, useQueryCache };

dist/index.js

 // src/use-mutation.ts
-import { computed as computed2, shallowRef as shallowRef2 } from "vue";
+import { computed as computed3, shallowRef as shallowRef2 } from "vue";
 
@@ -9,10 +9,16 @@ // src/query-store.ts
   getCurrentScope,
-  computed,
+  computed as computed2,
   triggerRef,
   shallowRef,
-  toValue
+  toValue as toValue2
 } from "vue";
 
 // src/utils.ts
-import { onScopeDispose } from "vue";
+import {
+  computed,
+  onScopeDispose,
+  ref,
+  toValue,
+  watch
+} from "vue";
 function useEventListener(target, event, listener, options) {
@@ -31,2 +37,21 @@ target.addEventListener(event, listener, options);
 };
+function delayLoadingRef(refOrGetter, delay = 300) {
+  const isDelayElapsed = ref(toValue(refOrGetter));
+  const newRef = computed(() => toValue(refOrGetter) && isDelayElapsed.value);
+  let timeout;
+  const stop = () => {
+    clearTimeout(timeout);
+  };
+  watch(refOrGetter, (value) => {
+    stop();
+    if (value) {
+      isDelayElapsed.value = false;
+      timeout = setTimeout(() => {
+        isDelayElapsed.value = true;
+      }, delay);
+    }
+  });
+  onScopeDispose(stop);
+  return newRef;
+}
 
@@ -122,4 +147,4 @@ // src/tree-map.ts
     status,
-    isPending: computed(() => data.value === void 0),
-    isFetching: computed(() => status.value === "loading"),
+    isPending: computed2(() => data.value === void 0),
+    isFetching: computed2(() => status.value === "loading"),
     pending: null
@@ -177,3 +202,3 @@ };
     const { key: _key, staleTime } = entry.options;
-    const key = toArray(toValue(_key)).map(stringifyFlatObject);
+    const key = toArray(toValue2(_key)).map(stringifyFlatObject);
     if (entry.error.value || isExpired(entry.when, staleTime)) {
@@ -194,3 +219,3 @@ console.log(`\u2B07\uFE0F refresh "${key}". expired ${entry.when} / ${staleTime}`);
     }
-    const key = toArray(toValue(entry.options.key)).map(stringifyFlatObject);
+    const key = toArray(toValue2(entry.options.key)).map(stringifyFlatObject);
     console.log("\u{1F504} refetching", key);
@@ -305,6 +330,6 @@ entry.status.value = "loading";
   const mutationReturn = {
-    data: computed2(() => data.value),
-    isLoading: computed2(() => status.value === "loading"),
-    status: computed2(() => status.value),
-    error: computed2(() => error.value),
+    data: computed3(() => data.value),
+    isLoading: computed3(() => status.value === "loading"),
+    status: computed3(() => status.value),
+    error: computed3(() => error.value),
     mutate,
@@ -318,9 +343,9 @@ reset
 import {
-  computed as computed3,
+  computed as computed4,
   onMounted,
   onServerPrefetch,
-  toValue as toValue2,
+  toValue as toValue3,
   onScopeDispose as onScopeDispose2,
   getCurrentScope as getCurrentScope2,
-  watch,
+  watch as watch2,
   getCurrentInstance
@@ -352,4 +377,4 @@ } from "vue";
   };
-  const entry = computed3(
-    () => store.ensureEntry(toArray(toValue2(options.key)), options)
+  const entry = computed4(
+    () => store.ensureEntry(toArray(toValue3(options.key)), options)
   );
@@ -359,7 +384,7 @@ const refresh = () => store.refresh(entry.value);
   const queryReturn = {
-    data: computed3(() => entry.value.data.value),
-    error: computed3(() => entry.value.error.value),
-    isFetching: computed3(() => entry.value.isFetching.value),
-    isPending: computed3(() => entry.value.isPending.value),
-    status: computed3(() => entry.value.status.value),
+    data: computed4(() => entry.value.data.value),
+    error: computed4(() => entry.value.error.value),
+    isFetching: computed4(() => entry.value.isFetching.value),
+    isPending: computed4(() => entry.value.isPending.value),
+    status: computed4(() => entry.value.status.value),
     refresh,
@@ -383,3 +408,3 @@ refetch
   }
-  watch(entry, (entry2, _, onCleanup) => {
+  watch2(entry, (entry2, _, onCleanup) => {
     if (!isActive)
@@ -470,2 +495,3 @@ return;
   USE_QUERY_DEFAULTS,
+  delayLoadingRef,
   serialize,
@@ -472,0 +498,0 @@ useMutation,

package.json

 {
   "name": "@pinia/colada",
   "packageManager": "pnpm@8.14.1",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "type": "module",
@@ -6,0 +6,0 @@ "description": "The smart data fetching layer for Pinia",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

142472

increased by4.08%

Lines of code

1274

increased by4.94%

No dependency changes