Use promise based local forage Recoil effect (#883)

* Mock localForage with a reasonable stub

* Use asyncLocalForageEffect

* Remove hacks to make localforage synchronous

* Update changelog

Author: kmcginnes

Changelog.md

@@ -8,6 +8,8 @@
   last sync timestamp (thanks @enumura1,
   [#901](https://github.com/aws/graph-explorer/pull/901),
   [#908](https://github.com/aws/graph-explorer/pull/908))
+- **Updated** localForage Recoil integration to be async and use Suspense
+  ([#883](https://github.com/aws/graph-explorer/pull/883))
 
 ## Release v1.15.0
 

packages/graph-explorer/src/core/AppStatusLoader.tsx

@@ -1,23 +1,28 @@
-import { PropsWithChildren, startTransition, useEffect } from "react";
+import { PropsWithChildren, startTransition, Suspense, useEffect } from "react";
 import { useLocation } from "react-router";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { LoadingSpinner, PanelEmptyState } from "@/components";
 import Redirect from "@/components/Redirect";
 import {
   activeConfigurationAtom,
   configurationAtom,
-  isStoreLoadedAtom,
 } from "./StateProvider/configuration";
 import { schemaAtom } from "./StateProvider/schema";
-import useLoadStore from "./StateProvider/useLoadStore";
 import { logger } from "@/utils";
 import { useQuery } from "@tanstack/react-query";
 import { fetchDefaultConnection } from "./defaultConnection";
 
-const AppStatusLoader = ({ children }: PropsWithChildren) => {
+function AppStatusLoader({ children }: PropsWithChildren) {
+  return (
+    <Suspense fallback={<PreparingEnvironment />}>
+      <LoadDefaultConfig>{children}</LoadDefaultConfig>
+    </Suspense>
+  );
+}
+
+function LoadDefaultConfig({ children }: PropsWithChildren) {
   const location = useLocation();
-  useLoadStore();
-  const isStoreLoaded = useRecoilValue(isStoreLoadedAtom);
+
   const [activeConfig, setActiveConfig] = useRecoilState(
     activeConfigurationAtom
   );
@@ -29,17 +34,12 @@ const AppStatusLoader = ({ children }: PropsWithChildren) => {
     queryFn: fetchDefaultConnection,
     staleTime: Infinity,
     // Run the query only if the store is loaded and there are no configs
-    enabled: isStoreLoaded && configuration.size === 0,
+    enabled: configuration.size === 0,
   });
 
   const defaultConnectionConfigs = defaultConfigQuery.data;
 
   useEffect(() => {
-    if (!isStoreLoaded) {
-      logger.debug("Store not loaded, skipping default connection load");
-      return;
-    }
-
     if (configuration.size > 0) {
       logger.debug(
         "Connections already exist, skipping default connection load"
@@ -66,23 +66,11 @@ const AppStatusLoader = ({ children }: PropsWithChildren) => {
   }, [
     activeConfig,
     configuration,
-    isStoreLoaded,
     setActiveConfig,
     setConfiguration,
     defaultConnectionConfigs,
   ]);
 
-  // Wait until state is recovered from the indexed DB
-  if (!isStoreLoaded) {
-    return (
-      <PanelEmptyState
-        title="Preparing environment..."
-        subtitle="We are loading all components"
-        icon={<LoadingSpinner />}
-      />
-    );
-  }
-
   if (configuration.size === 0 && defaultConfigQuery.isLoading) {
     return (
       <PanelEmptyState
@@ -120,6 +108,16 @@ const AppStatusLoader = ({ children }: PropsWithChildren) => {
   }
 
   return <>{children}</>;
-};
+}
+
+function PreparingEnvironment() {
+  return (
+    <PanelEmptyState
+      title="Preparing environment..."
+      subtitle="We are loading all components"
+      icon={<LoadingSpinner />}
+    />
+  );
+}
 
 export default AppStatusLoader;

packages/graph-explorer/src/core/StateProvider/configuration.ts

@@ -9,7 +9,7 @@ import type {
   RawConfiguration,
   VertexTypeConfig,
 } from "@/core";
-import localForageEffect from "./localForageEffect";
+import { localForageEffect } from "./localForageEffect";
 import { activeSchemaSelector, SchemaInference } from "./schema";
 import {
   EdgePreferences,
@@ -23,21 +23,16 @@ import {
   RESERVED_TYPES_PROPERTY,
 } from "@/utils/constants";
 
-export const isStoreLoadedAtom = atom<boolean>({
-  key: "store-loaded",
-  default: false,
-});
-
 export const activeConfigurationAtom = atom<ConfigurationId | null>({
   key: "active-configuration",
   default: null,
-  effects: [localForageEffect()],
+  effects: [localForageEffect("active-configuration")],
 });
 
 export const configurationAtom = atom<Map<ConfigurationId, RawConfiguration>>({
   key: "configuration",
   default: new Map(),
-  effects: [localForageEffect()],
+  effects: [localForageEffect("configuration")],
 });
 
 /** Gets or sets the config that is currently active. */

packages/graph-explorer/src/core/StateProvider/graphSession/storage.ts

@@ -2,7 +2,7 @@ import { atom, DefaultValue, selector } from "recoil";
 import { EdgeId, VertexId } from "../../entities";
 import { activeConfigurationAtom } from "../configuration";
 import { ConfigurationId } from "../../ConfigurationProvider";
-import localForageEffect from "../localForageEffect";
+import { localForageEffect } from "../localForageEffect";
 
 /** A model for the graph data that is stored in local storage. */
 export type GraphSessionStorageModel = {
@@ -19,7 +19,7 @@ export const isRestorePreviousSessionAvailableAtom = atom({
 export const allGraphSessionsAtom = atom({
   key: "graph-sessions",
   default: new Map<ConfigurationId, GraphSessionStorageModel>(),
-  effects: [localForageEffect()],
+  effects: [localForageEffect("graph-sessions")],
 });
 
 /** Gets or sets the active connection's graph session data. */

packages/graph-explorer/src/core/StateProvider/localForageEffect.ts

@@ -1,48 +1,12 @@
 import localForage from "localforage";
 import { AtomEffect, DefaultValue } from "recoil";
-import { logger } from "@/utils";
 
 localForage.config({
   name: "ge",
   version: 1.0,
   storeName: "graph-explorer",
 });
 
-// The first time that the atom is loaded from the store,
-// mark as loaded to avoid side effect on asynchronous events
-// that can load the atom state before it is recovered from the store
-export const loadedAtoms: Set<string> = new Set();
-
-const localForageEffect =
-  <T>(): AtomEffect<T> =>
-  ({ setSelf, onSet, trigger, node }) => {
-    // If there's a persisted value - set it on load
-    const loadPersisted = async () => {
-      const savedValue = await localForage.getItem(node.key);
-
-      if (savedValue != null) {
-        setSelf(savedValue as T | DefaultValue);
-        return;
-      }
-    };
-
-    if (trigger === "get") {
-      loadPersisted().then(() => {
-        loadedAtoms.add(node.key);
-      });
-    }
-
-    // Subscribe to state changes and persist them to localForage
-    onSet((newValue: T, _: T | DefaultValue, isReset: boolean) => {
-      isReset
-        ? localForage.removeItem(node.key)
-        : localForage.setItem(node.key, newValue);
-    });
-  };
-
-// Reference docs:
-// https://recoiljs.org/docs/guides/atom-effects#asynchronous-storage
-
 /**
  * Loads and sets data asynchronously to localForage. Must be used within a
  * Suspense and ErrorBoundary.
@@ -51,31 +15,27 @@ const localForageEffect =
  * @returns An AtomEffect that will connect Recoil to localForage
  * asynchronously.
  */
-export function asyncLocalForageEffect<T>(key: string): AtomEffect<T> {
-  logger.debug(`[${key}] Async local forage effect created`);
-
-  return ({ setSelf, onSet }) => {
-    setSelf(
-      localForage.getItem(key).then(
-        savedValue =>
-          savedValue != null
-            ? (savedValue as T | DefaultValue)
-            : new DefaultValue() // Abort initialization if no value was stored
-      )
-    );
+export function localForageEffect<T>(key: string): AtomEffect<T> {
+  return ({ setSelf, onSet, trigger }) => {
+    // Load saved value
+    if (trigger === "get") {
+      setSelf(
+        localForage.getItem<T>(key).then(savedValue => {
+          return savedValue != null ? savedValue : new DefaultValue();
+        })
+      );
+    }
 
     // Subscribe to state changes and persist them to localForage
-    onSet((newValue: T, _, isReset) => {
+    onSet((newValue, _, isReset) => {
       if (isReset) {
-        logger.debug(`[${key}] Resetting value`, newValue);
         localForage.removeItem(key);
-        return;
+      } else {
+        localForage.setItem(key, newValue);
       }
-
-      logger.debug(`[${key}] Setting value`, newValue);
-      localForage.setItem(key, newValue);
     });
   };
 }
 
-export default localForageEffect;
+// Reference docs:
+// https://recoiljs.org/docs/guides/atom-effects#asynchronous-storage

packages/graph-explorer/src/core/StateProvider/schema.ts

@@ -5,7 +5,7 @@ import {
   PrefixTypeConfig,
   VertexTypeConfig,
 } from "@/core/ConfigurationProvider";
-import localForageEffect from "./localForageEffect";
+import { localForageEffect } from "./localForageEffect";
 import { activeConfigurationAtom } from "./configuration";
 import { Edge, Entities, toEdgeMap, toNodeMap, Vertex } from "@/core";
 import { logger, sanitizeText } from "@/utils";
@@ -26,7 +26,7 @@ export type SchemaInference = {
 export const schemaAtom = atom<Map<string, SchemaInference>>({
   key: "schema",
   default: new Map(),
-  effects: [localForageEffect()],
+  effects: [localForageEffect("schema")],
 });
 
 export const activeSchemaSelector = selector({

packages/graph-explorer/src/core/StateProvider/useLoadStore.ts

@@ -1,5 +1,5 @@
 import { atom, DefaultValue, selectorFamily, useSetRecoilState } from "recoil";
-import localForageEffect from "./localForageEffect";
+import { localForageEffect } from "./localForageEffect";
 import { useCallback } from "react";
 
 export type ShapeStyle =
@@ -120,7 +120,7 @@ export type SidebarItems = UserPreferences["layout"]["activeSidebarItem"];
 export const userStylingAtom = atom<UserStyling>({
   key: "user-styling",
   default: {},
-  effects: [localForageEffect()],
+  effects: [localForageEffect("user-styling")],
 });
 
 export const userStylingNodeAtom = selectorFamily({
@@ -211,7 +211,7 @@ export const userLayoutAtom = atom<UserPreferences["layout"]>({
       height: 300,
     },
   },
-  effects: [localForageEffect()],
+  effects: [localForageEffect("user-layout")],
 });
 
 export function useCloseSidebar() {

packages/graph-explorer/src/core/StateProvider/userPreferences.ts

@@ -1,25 +1,25 @@
 import { atom, selector, useRecoilValue } from "recoil";
-import { asyncLocalForageEffect } from "./StateProvider/localForageEffect";
+import { localForageEffect } from "./StateProvider/localForageEffect";
 
 /** Shows Recoil diff logs in the browser console. */
 export const showRecoilStateLoggingAtom = atom({
   key: "feature-flag-recoil-state-logging",
   default: false,
-  effects: [asyncLocalForageEffect("showRecoilStateLogging")],
+  effects: [localForageEffect("showRecoilStateLogging")],
 });
 
 /** Shows debug actions in various places around the app. */
 export const showDebugActionsAtom = atom({
   key: "feature-flag-debug-actions",
   default: false,
-  effects: [asyncLocalForageEffect("showDebugActions")],
+  effects: [localForageEffect("showDebugActions")],
 });
 
 /** Shows debug actions in various places around the app. */
 export const allowLoggingDbQueryAtom = atom({
   key: "feature-flag-db-query-logging",
   default: false,
-  effects: [asyncLocalForageEffect("allowLoggingDbQuery")],
+  effects: [localForageEffect("allowLoggingDbQuery")],
 });
 
 export type FeatureFlags = {