fix: Make sure all save requests are completed before publishing

frontend/src/components/BuilderToolbar.vue

@@ -156,19 +156,10 @@ import PageOptions from "./PageOptions.vue";
 import Settings from "./Settings.vue";
 
 const store = useStore();
-const publishing = ref(false);
 const showInfoDialog = ref(false);
 const showSettingsDialog = ref(false);
 const toolbar = ref(null);
 
-const publishButtonLabel = computed(() => {
-	if ((store.activePage?.draft_blocks && !store.activePage?.published) || !store.activePage?.draft_blocks) {
-		return "Publish";
-	} else {
-		return "Publish Changes";
-	}
-});
-
 const currentlyViewedByText = computed(() => {
 	const names = store.viewers.map((viewer) => viewer.fullname).map((name) => name.split(" ")[0]);
 	const count = names.length;

frontend/src/store.ts

@@ -19,6 +19,7 @@ import Block from "./utils/block";
 import getBlockTemplate from "./utils/blockTemplate";
 import {
 	confirm,
+	generateId,
 	getBlockCopy,
 	getBlockInstance,
 	getBlockString,
@@ -75,6 +76,7 @@ const useStore = defineStore("store", {
 		activePage: <BuilderPage | null>null,
 		savingPage: false,
 		realtime: new RealTimeHandler(),
+		saveId: null,
 		viewers: <UserInfo[]>[],
 		blockTemplateMap: <Map<string, BlockTemplate>>new Map(),
 		activeFolder: useStorage("activeFolder", ""),
@@ -102,7 +104,7 @@ const useStore = defineStore("store", {
 			placeholder: <HTMLElement | null>null,
 			parentBlock: <Block | null>null,
 			index: <number | null>null,
-		}
+		},
 	}),
 	actions: {
 		clearBlocks() {
@@ -410,8 +412,11 @@ const useStore = defineStore("store", {
 		},
 		savePage() {
 			this.pageBlocks = this.getPageBlocks() as Block[];
-			const pageData = JSON.stringify(this.pageBlocks.map((block) => getCopyWithoutParent(block)));
+			const pageData = JSON.stringify(this.pageBlocks.map((block: Block) => getCopyWithoutParent(block)));
+			const saveId = generateId();
 
+			// more save requests can be triggered till the first one is completed
+			this.saveId = saveId;
 			const args = {
 				name: this.selectedPage,
 				draft_blocks: pageData,
@@ -422,7 +427,10 @@ const useStore = defineStore("store", {
 					this.activePage = page;
 				})
 				.finally(() => {
-					this.savingPage = false;
+					if (this.saveId === saveId) {
+						this.saveId = null;
+						this.savingPage = false;
+					}
 					this.activeCanvas?.toggleDirty(false);
 				});
 		},
@@ -487,7 +495,9 @@ const useStore = defineStore("store", {
 		},
 		async waitTillPageIsSaved() {
 			// small delay so that all the save requests are triggered
-			await new Promise((resolve) => setTimeout(resolve, 100));
+			if (!this.savingPage) {
+				await new Promise((resolve) => setTimeout(resolve, 250));
+			}
 			return new Promise((resolve) => {
 				const interval = setInterval(() => {
 					if (!this.savingPage) {
@@ -562,7 +572,7 @@ const useStore = defineStore("store", {
 				const ghostScale = this.activeCanvas?.canvasProps.scale;
 
 				// Clone the entire draggable element
-				const dragElement = (ev.target as HTMLElement)
+				const dragElement = ev.target as HTMLElement;
 				if (!dragElement) return;
 				const ghostDiv = document.createElement("div");
 				const ghostElement = dragElement.cloneNode(true) as HTMLElement;
@@ -600,9 +610,9 @@ const useStore = defineStore("store", {
 				placeholder: null,
 				parentBlock: null,
 				index: null,
-			}
-			this.isDragging = false
-			this.isDropping = false
+			};
+			this.isDragging = false;
+			this.isDropping = false;
 		},
 		insertDropPlaceholder() {
 			// append placeholder component to the dom directly
@@ -619,11 +629,11 @@ const useStore = defineStore("store", {
 			return this.dropTarget.placeholder;
 		},
 		removeDropPlaceholder() {
-			const placeholder = document.getElementById("placeholder")
+			const placeholder = document.getElementById("placeholder");
 			if (placeholder) {
-				placeholder.remove()
+				placeholder.remove();
 			}
-		}
+		},
 	},
 });