Fix app snapshot states change too often bug

.changeset/odd-hounds-enjoy.md

@@ -0,0 +1,6 @@
+---
+"@pulse-editor/shared-utils": patch
+"@pulse-editor/react-api": patch
+---
+
+Fix snapshot restore triggers at every state changes

.changeset/pre.json

@@ -39,6 +39,7 @@
     "large-moose-tap",
     "lazy-zebras-mate",
     "mighty-ghosts-crash",
+    "odd-hounds-enjoy",
     "petite-memes-fix",
     "polite-lines-dance",
     "polite-rules-switch",

npm-packages/react-api/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @pulse-editor/react-api
 
+## 0.1.1-alpha.47
+
+### Patch Changes
+
+- Fix snapshot restore triggers at every state changes
+- Updated dependencies
+  - @pulse-editor/shared-utils@0.1.1-alpha.47
+
 ## 0.1.1-alpha.46
 
 ### Patch Changes

npm-packages/react-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pulse-editor/react-api",
-  "version": "0.1.1-alpha.46",
+  "version": "0.1.1-alpha.47",
   "main": "dist/main.js",
   "files": [
     "dist"
@@ -38,7 +38,7 @@
     "typescript-eslint": "^8.30.1"
   },
   "peerDependencies": {
-    "@pulse-editor/shared-utils": "0.1.1-alpha.46",
+    "@pulse-editor/shared-utils": "0.1.1-alpha.47",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }

npm-packages/react-api/src/hooks/editor/use-snapshot-state.ts

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { SnapshotContext } from "../../providers/snapshot-provider";
 
 export default function useSnapShotState<T>(
@@ -7,25 +7,23 @@ export default function useSnapShotState<T>(
   onRestore?: (value: T) => void
 ) {
   const snapshotContext = useContext(SnapshotContext);
-
   if (!snapshotContext) {
     throw new Error("useSnapShotState must be used within a SnapshotProvider");
   }
 
   const { states, setStates } = snapshotContext;
-
-  // Initialize state with the value from context or the initial value
   const [state, setState] = useState<T>(
     states[key] !== undefined ? states[key] : initialValue
   );
 
-  // Update context whenever state changes
+  const isLocalUpdate = useRef(false);
+
   const setSnapshotState: React.Dispatch<React.SetStateAction<T>> = (value) => {
     setState((prev) => {
       const newValue =
         typeof value === "function" ? (value as (prev: T) => T)(prev) : value;
 
-      // Defer the setStates call to next microtask, outside render phase
+      isLocalUpdate.current = true; // mark as local
       Promise.resolve().then(() => {
         setStates((prevStates) => ({
           ...prevStates,
@@ -37,26 +35,31 @@ export default function useSnapShotState<T>(
     });
   };
 
-  // Set the initial value in context if not already set
+  // Initialize context with initial value
   useEffect(() => {
-    // Only set if the key does not exist in the context
     if (states[key] === undefined && initialValue !== undefined) {
-      setStates((prevStates) => ({
-        ...prevStates,
+      setStates((prev) => ({
+        ...prev,
         [key]: initialValue,
       }));
     }
   }, []);
 
-  // Restore state from context when key or states change
+  // Only restore when external changes occur
   useEffect(() => {
-    console.log("Restoring state for key:", key, states[key]);
+    const contextValue = states[key];
+    if (contextValue === undefined) return;
+
+    if (isLocalUpdate.current) {
+      // skip this run because we caused it ourselves
+      isLocalUpdate.current = false;
+      return;
+    }
 
-    if (states[key] !== undefined && states[key] !== state) {
-      setState(states[key]);
-      if (onRestore) {
-        onRestore(states[key]);
-      }
+    if (contextValue !== state) {
+      console.log("Restoring state for key:", key, contextValue);
+      setState(contextValue);
+      onRestore?.(contextValue);
     }
   }, [states[key]]);
 

npm-packages/shared-utils/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pulse-editor/shared-utils
 
+## 0.1.1-alpha.47
+
+### Patch Changes
+
+- Fix snapshot restore triggers at every state changes
+
 ## 0.1.1-alpha.46
 
 ### Patch Changes

npm-packages/shared-utils/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pulse-editor/shared-utils",
-    "version": "0.1.1-alpha.46",
+    "version": "0.1.1-alpha.47",
     "main": "dist/main.js",
     "files": [
         "dist"

web/components/marketplace/app/app-gallery.tsx

@@ -143,6 +143,8 @@ export default function AppGallery() {
     <div className="flex flex-col gap-y-2">
       <div className="flex flex-col items-center">
         <Select
+          label="Filter apps"
+          size="sm"
           className="w-fit min-w-48"
           items={selectLabels}
           startContent={

web/components/marketplace/workflow/workflow-gallery.tsx

@@ -84,6 +84,8 @@ export default function WorkflowGallery() {
     <div className="flex flex-col gap-y-2">
       <div className="flex flex-col items-center">
         <Select
+          label="Filter workflows"
+          size="sm"
           className="w-fit min-w-48"
           items={selectLabels}
           startContent={

web/lib/hooks/use-canvas-workflow.ts

@@ -38,6 +38,8 @@ export default function useCanvasWorkflow(
     ReactFlowNode<AppNodeData> | undefined
   >(initialWorkflowContent?.defaultEntryPoint);
 
+  const [isRestored, setIsRestored] = useState(false);
+
   // Update entry points
   useEffect(() => {
     debouncedGetEntryPoint();
@@ -47,14 +49,17 @@ export default function useCanvasWorkflow(
   useEffect(() => {
     async function restore() {
       if (!imcContext) return;
+      else if (isRestored) return;
+      else if (!initialWorkflowContent) return;
+      setIsRestored(true);
 
-      if (initialWorkflowContent?.snapshotStates) {
+      if (initialWorkflowContent.snapshotStates) {
         await restoreAppsSnapshotStates(initialWorkflowContent);
       }
     }
 
     restore();
-  }, [initialWorkflowContent, imcContext]);
+  }, [initialWorkflowContent, imcContext, isRestored]);
 
   async function startWorkflow() {
     // DAG traversal using Kahn's algorithm (topological sort)