@pylonsync/react 0.3.200 → 0.3.202

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.200",
+  "version": "0.3.202",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -12,8 +12,8 @@
     "check": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@pylonsync/sdk": "0.3.200",
-    "@pylonsync/sync": "0.3.200"
+    "@pylonsync/sdk": "0.3.202",
+    "@pylonsync/sync": "0.3.202"
   },
   "peerDependencies": {
     "react": ">=19.0.0"

package/src/hooks.ts

@@ -74,7 +74,15 @@ export function useQuery<T = Row>(
   entity: string,
   options?: QueryOptions
 ): UseQueryReturn<T> {
-  const loading = useRef<boolean>(sync.store.list(entity).length === 0);
+  // `loading` is true only while we genuinely don't know yet — i.e.,
+  // the engine hasn't drained IndexedDB into the in-memory store. Once
+  // hydrated, an empty list is a real empty (not "still fetching"), so
+  // refreshes with cached data don't flash "Loading…" before the rows
+  // render. The engine's `isHydrated()` exposes a synchronous gate that
+  // flips true after `loadAllEntities()` settles.
+  const loading = useRef<boolean>(
+    !sync.isHydrated() && sync.store.list(entity).length === 0,
+  );
   const error = useRef<Error | null>(null);
   const optionsKey = JSON.stringify(options || {});
 
@@ -104,7 +112,16 @@ export function useQuery<T = Row>(
     if (sig !== snapshotCache.current.sig) {
       snapshotCache.current = { rows: filtered as T[], sig };
     }
-    if (rows.length > 0 && loading.current) loading.current = false;
+    // Loading is false the moment hydration finishes — even when the
+    // disk replica is empty (a real "no rows yet" state, not "still
+    // fetching"). The previous gate only flipped when rows arrived,
+    // so an entity with zero cached rows stayed in loading=true
+    // forever until a server pull / WS event populated it. After:
+    // hydration completion fires store.notify() → getSnapshot re-runs
+    // → loading goes false immediately, the empty state renders.
+    if (loading.current && (rows.length > 0 || sync.isHydrated())) {
+      loading.current = false;
+    }
     return snapshotCache.current.rows;
   }, [sync, entity, optionsKey, options]);
 
@@ -140,7 +157,12 @@ export function useQueryOne<T = Row>(
   entity: string,
   id: string
 ): UseQueryOneReturn<T> {
-  const loading = useRef<boolean>(sync.store.get(entity, id) === null);
+  // Same hydration-aware loading semantics as useQuery — see the
+  // comment there. Without this, a refreshed page flashes "Loading…"
+  // for the row even when it's already in IndexedDB.
+  const loading = useRef<boolean>(
+    !sync.isHydrated() && sync.store.get(entity, id) === null,
+  );
   const error = useRef<Error | null>(null);
 
   const subscribe = useMemo(
@@ -165,7 +187,13 @@ export function useQueryOne<T = Row>(
     if (sig !== snapshotCache.current.sig) {
       snapshotCache.current = { row: (row as T) ?? null, sig };
     }
-    if (row !== null && loading.current) loading.current = false;
+    // Mirror useQuery: loading flips false on hydration completion
+    // even when the row is missing (not "still fetching" — genuinely
+    // not present yet). Without the isHydrated() check, a missing
+    // row stuck loading=true forever.
+    if (loading.current && (row !== null || sync.isHydrated())) {
+      loading.current = false;
+    }
     return snapshotCache.current.row;
   }, [sync, entity, id]);