Buffer file writes, because writing to file after every keypress has bad consequences (#4242)

* Buffer file writes, because writing to file after every keypress does bad things

* fix: kevin -- added timeouts for the time being since the workflow for saving data to disk is now changed

---------

Co-authored-by: Kevin Nadro <kevin@zoo.dev>

e2e/playwright/file-tree.spec.ts

@@ -136,6 +136,9 @@ test.describe('when using the file tree to', () => {
       )
       await pasteCodeInEditor(kclCube)
 
+      // TODO: We have a timeout of 1s between edits to write to disk. If you reload the page too quickly it won't write to disk.
+      await tronApp.page.waitForTimeout(2000)
+
       await renameFile(fromFile, toFile)
       await tronApp.page.reload()
 
@@ -222,9 +225,11 @@ test.describe('when using the file tree to', () => {
       )
       await pasteCodeInEditor(kclCube)
 
+      // TODO: We have a timeout of 1s between edits to write to disk. If you reload the page too quickly it won't write to disk.
+      await tronApp.page.waitForTimeout(2000)
+
       const kcl1 = 'main.kcl'
       const kcl2 = '2.kcl'
-
       await createNewFileAndSelect(kcl2)
       const kclCylinder = await fsp.readFile(
         'src/wasm-lib/tests/executor/inputs/cylinder.kcl',
@@ -232,6 +237,9 @@ test.describe('when using the file tree to', () => {
       )
       await pasteCodeInEditor(kclCylinder)
 
+      // TODO: We have a timeout of 1s between edits to write to disk. If you reload the page too quickly it won't write to disk.
+      await tronApp.page.waitForTimeout(2000)
+
       await renameFile(kcl2, kcl1)
 
       await test.step(`Postcondition: ${kcl1} still has the original content`, async () => {

src/components/FileTree.tsx

@@ -488,6 +488,12 @@ export const FileTreeInner = ({
   // Refresh the file tree when there are changes.
   useFileSystemWatcher(
     async (eventType, path) => {
+      // Our other watcher races with this watcher on the current file changes,
+      // so we need to stop this one from reacting at all, otherwise Bad Things
+      // Happen™.
+      const isCurrentFile = loaderData.file?.path === path
+      const hasChanged = eventType === 'change'
+      if (isCurrentFile && hasChanged) return
       fileSend({ type: 'Refresh' })
     },
     [loaderData?.project?.path, fileContext.selectedDirectory.path].filter(

src/lang/codeManager.ts

@@ -18,6 +18,7 @@ export default class CodeManager {
   #updateState: (arg: string) => void = () => {}
   private _currentFilePath: string | null = null
   private _hotkeys: { [key: string]: () => void } = {}
+  private timeoutWriter: ReturnType<typeof setTimeout> | undefined = undefined
 
   constructor() {
     if (isDesktop()) {
@@ -115,7 +116,11 @@ export default class CodeManager {
 
   async writeToFile() {
     if (isDesktop()) {
-      setTimeout(() => {
+      // Only write our buffer contents to file once per second. Any faster
+      // and file-system watchers which read, will receive empty data during
+      // writes.
+      clearTimeout(this.timeoutWriter)
+      this.timeoutWriter = setTimeout(() => {
         // Wait one event loop to give a chance for params to be set
         // Save the file to disk
         this._currentFilePath &&
@@ -126,7 +131,7 @@ export default class CodeManager {
               console.error('error saving file', err)
               toast.error('Error saving file, please check file permissions')
             })
-      })
+      }, 1000)
     } else {
       safeLSSetItem(PERSIST_CODE_KEY, this.code)
     }