Add UI for closing the sketch loop (#87)

src/useStore.ts

@@ -93,6 +93,7 @@ interface StoreState {
   ast: Program | null
   setAst: (ast: Program | null) => void
   updateAst: (ast: Program, focusPath?: PathToNode) => void
+  updateAstAsync: (ast: Program, focusPath?: PathToNode) => void
   code: string
   setCode: (code: string) => void
   formatCode: () => void
@@ -107,6 +108,8 @@ interface StoreState {
   setIsShiftDown: (isShiftDown: boolean) => void
 }
 
+let pendingAstUpdates: number[] = []
+
 export const useStore = create<StoreState>()(
   persist(
     (set, get) => ({
@@ -159,6 +162,7 @@ export const useStore = create<StoreState>()(
       },
       updateAst: async (ast, focusPath) => {
         const newCode = recast(ast)
+        console.log('running update Ast', ast)
         const astWithUpdatedSource = abstractSyntaxTree(
           await asyncLexer(newCode)
         )
@@ -173,6 +177,17 @@ export const useStore = create<StoreState>()(
           })
         }
       },
+      updateAstAsync: async (ast, focusPath) => {
+        // clear any pending updates
+        pendingAstUpdates.forEach((id) => clearTimeout(id))
+        pendingAstUpdates = []
+        // setup a new update
+        pendingAstUpdates.push(
+          setTimeout(() => {
+            get().updateAst(ast, focusPath)
+          }, 100) as unknown as number
+        )
+      },
       code: '',
       setCode: (code) => {
         set({ code })