fix: prevent slide loss from overlapping auto-save network calls

frontend/src/App.vue

@@ -13,7 +13,7 @@ import { onMounted, h, ref, provide } from 'vue'
 import { FrappeUIProvider, toast } from 'frappe-ui'
 
 import { Wifi, WifiOff } from 'lucide-vue-next'
-import { syncPresentationToServer } from '@/stores/saving'
+import { saveCurrentState } from '@/stores/saving'
 
 const isOnline = ref(false)
 
@@ -27,7 +27,7 @@ const handleLostConnection = () => {
 
 const handleConnectionRestored = () => {
 	isOnline.value = true
-	syncPresentationToServer()
+	saveCurrentState()
 	toast.create({
 		message: 'You are back online.',
 		icon: h(Wifi, { color: 'white' }),

frontend/src/pages/PresentationEditor.vue

@@ -99,13 +99,7 @@ import {
 import { resetFocus, focusElementId } from '@/stores/element'
 
 import { useShortcuts } from '@/composables/useShortcuts'
-import {
-	saveChanges,
-	dirtySince,
-	isDirty,
-	syncPresentationToServer,
-	syncThumbnail,
-} from '@/stores/saving'
+import { saveChanges, saveCurrentState, dirtySince, isDirty, syncThumbnail } from '@/stores/saving'
 import { inSlideShowMode, startSlideShow } from '@/stores/slideshow'
 import { Layout } from 'lucide-vue-next'
 import LayoutDialog from '@/components/LayoutDialog.vue'
@@ -243,7 +237,7 @@ const handleBeforeUnmount = () => {
 
 	if (router.currentRoute.value.name !== 'Slideshow') {
 		resetFocus()
-		syncPresentationToServer()
+		saveCurrentState()
 	}
 	window.removeEventListener('beforeunload', handleBeforeUnload)
 	window.removeEventListener('popstate', hideOpenDialogs)

frontend/src/stores/element.js

@@ -281,7 +281,6 @@ const addMediaElement = async (file, type) => {
 		videoPoster = posterURL
 	}
 
-	const { width, height } = type === 'image' ? await getNaturalSize(src) : { width: 400 }
 	let element = {
 		id: generateUniqueId(),
 		zIndex: currentSlide.value.elements.length + 1,

frontend/src/stores/saving.js

@@ -113,8 +113,6 @@ const syncSnapshotToServer = async (snapshot) => {
 }
 
 const syncPresentationToServer = async () => {
-	isSaving.value = true
-
 	try {
 		const snapshot = await getPresentationFromLocalDB(presentationId.value)
 		if (!snapshot || !snapshot.dirty) return
@@ -123,8 +121,6 @@ const syncPresentationToServer = async () => {
 		await syncSnapshotToServer(snapshot)
 	} catch (err) {
 		console.error('Sync to server failed: ', err)
-	} finally {
-		isSaving.value = false
 	}
 }
 
@@ -134,32 +130,39 @@ const getLatestSlideContent = () => {
 }
 
 const saveCurrentState = async () => {
-	const content = getLatestSlideContent()
+	if (isSaving.value) return
+	if (!slides.value?.length || !presentationId.value) return
 
-	// save latest content to indexedDB with dirty flag since it's not yet synced to server
-	await savePresentationToLocalDB({
-		id: presentationId.value,
-		content: content,
-		updatedAt: Date.now(),
-		dirty: true,
-	})
+	isSaving.value = true
 
-	// if offline, do not attempt to sync to server
-	if (!navigator.onLine) return
+	try {
+		const content = getLatestSlideContent()
 
-	// if online, sync to server
-	await syncPresentationToServer()
-}
+		// save latest content to indexedDB with dirty flag since it's not yet synced to server
+		await savePresentationToLocalDB({
+			id: presentationId.value,
+			content: content,
+			updatedAt: Date.now(),
+			dirty: true,
+		})
 
-const saveChanges = () => {
-	if (isSaving.value) return
+		// if offline, do not attempt to sync to server
+		if (!navigator.onLine) return
+
+		// if online, sync to server
+		await syncPresentationToServer()
+	} finally {
+		isSaving.value = false
+	}
+}
 
+const saveChanges = async () => {
 	if (!isDirty.value && syncThumbnail === 0) return
 
 	if (isDirty.value) syncThumbnail = 1
 	else syncThumbnail = 0
 
-	saveCurrentState()
+	await saveCurrentState()
 }
 
-export { syncPresentationToServer, saveChanges, dirtySince, isDirty, syncThumbnail }
+export { saveCurrentState, saveChanges, dirtySince, isDirty, syncThumbnail }