@instantdb/react-common 1.0.50 → 1.0.51-branch-optional-async-storage.29876965683.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instantdb/react-common",
-  "version": "1.0.50",
+  "version": "1.0.51-branch-optional-async-storage.29876965683.1",
   "description": "Instant DB shared components for React and React Native",
   "license": "Apache-2.0",
   "homepage": "https://github.com/instantdb/instant/tree/main/client/packages/react-common",
@@ -54,8 +54,8 @@
     "react": ">=16"
   },
   "dependencies": {
-    "@instantdb/version": "1.0.50",
-    "@instantdb/core": "1.0.50"
+    "@instantdb/core": "1.0.51-branch-optional-async-storage.29876965683.1",
+    "@instantdb/version": "1.0.51-branch-optional-async-storage.29876965683.1"
   },
   "scripts": {
     "test": "vitest",

package/src/InstantReactAbstractDatabase.tsx

@@ -7,6 +7,7 @@ import {
   type AuthState,
   type User,
   type ConnectionStatus,
+  type AppStatusState,
   type TransactionChunk,
   type RoomSchemaShape,
   type InstaQLOptions,
@@ -44,6 +45,11 @@ const defaultAuthState = {
   error: undefined,
 };
 
+const defaultAppStatusState: AppStatusState = {
+  isLoading: true,
+  isReadOnly: undefined,
+};
+
 export default abstract class InstantReactAbstractDatabase<
   // need to pull this schema out to another generic for query params, not sure why
   Schema extends InstantSchemaDef<any, any, any>,
@@ -371,6 +377,42 @@ export default abstract class InstantReactAbstractDatabase<
     return status;
   };
 
+  /**
+   * Observe the app's maintenance-mode state. While read-only, reads and
+   * live queries keep working but writes are rejected.
+   *
+   * @example
+   *  function App() {
+   *    const { isLoading, isReadOnly } = db.useAppStatus()
+   *    if (isLoading) return null
+   *    if (isReadOnly) return <MaintenanceBanner />
+   *    // ...
+   *  }
+   */
+  useAppStatus = (): AppStatusState => {
+    const stateRef = useRef<AppStatusState>(this.core._reactor._appStatusState);
+
+    const subscribe = useCallback((cb: () => void) => {
+      return this.core.subscribeAppStatus((state) => {
+        if (
+          state.isLoading !== stateRef.current.isLoading ||
+          state.isReadOnly !== stateRef.current.isReadOnly
+        ) {
+          stateRef.current = state;
+          cb();
+        }
+      });
+    }, []);
+
+    const state = useSyncExternalStore<AppStatusState>(
+      subscribe,
+      () => stateRef.current,
+      () => defaultAppStatusState,
+    );
+
+    return state;
+  };
+
   /**
    * Use this for one-off queries.
    * Returns local data if available, otherwise fetches from the server.