From fa306843a3b9c5c2f9ff02d79d50ea0198e06a6f Mon Sep 17 00:00:00 2001
From: foxriver76 <moritz.heusinger@gmail.com>
Date: Mon, 6 Nov 2023 09:02:15 +0100
Subject: [PATCH] improved performance due to optimizations on auto save

- closes #121
---
 README.md       |  4 ++++
 src/src/App.jsx | 28 +++++++++++++---------------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index a5d057c7f..54b508d61 100644
--- a/README.md
+++ b/README.md
@@ -228,6 +228,10 @@ E.g., if it was used in a menu and the menu is red, the circle would be red.
     ### **WORK IN PROGRESS**
 -->
 ## Changelog
+
+### **WORK IN PROGRESS**
+* (foxriver76) improved performance due to optimizations on auto save
+
 ### 2.3.5 (2023-11-03)
 * (foxriver76) update adapter-react to have enhanced image support in file selector
 * (foxriver76) fixed color of file browser in light mode
diff --git a/src/src/App.jsx b/src/src/App.jsx
index c900deb1a..119d17d92 100644
--- a/src/src/App.jsx
+++ b/src/src/App.jsx
@@ -988,42 +988,40 @@ class App extends Runtime {
     }
 
     changeProject = async (project, ignoreHistory) => {
-        // remove all special structures
-        this.unsyncMultipleWidgets(project);
-
         // set timestamp
         project.___settings.ts = `${Date.now()}.${Math.random().toString(36).substring(7)}`;
-        const newState = { project, needSave: true };
 
         if (!ignoreHistory) {
             // do not save history too often
             this.saveHistory(project);
         }
 
-        const projectStr = JSON.stringify(project, null, 2);
+        await this.setStateAsync({ visProject: project, needSave: true });
+
         // save changes after 1 second
-        // eslint-disable-next-line no-unused-expressions
         this.savingTimer && clearTimeout(this.savingTimer);
-        this.savingTimer = setTimeout(async _projectStr => {
+        this.savingTimer = setTimeout(async () => {
+            console.log('save');
             this.savingTimer = null;
+
+            // remove all special structures
+            this.unsyncMultipleWidgets(project);
+
+            const projectStr = JSON.stringify(project, null, 2);
+
             if ('TextEncoder' in window) {
                 const encoder = new TextEncoder();
-                const data = encoder.encode(_projectStr);
+                const data = encoder.encode(projectStr);
                 await this.socket.writeFile64(this.adapterId, `${this.state.projectName}/vis-views.json`, data);
             } else {
-                await this.socket.writeFile64(this.adapterId, `${this.state.projectName}/vis-views.json`, _projectStr);
+                await this.socket.writeFile64(this.adapterId, `${this.state.projectName}/vis-views.json`, projectStr);
             }
 
             this.setState({ needSave: false });
             if (this.needRestart) {
                 window.location.reload();
             }
-        }, 1000, projectStr);
-
-        this.syncMultipleWidgets(project);
-
-        newState.visProject = project;
-        await this.setStateAsync(newState);
+        }, 1_000);
     };
 
     unsyncMultipleWidgets(project) {