feat: sync button indicates in-progress synchronization (#8)

The sync button is disabled during the ongoing synchronization of bookmarks.
This prevents certain race conditions during the update of bookmarks,
which resulted in duplicates.
Additionally, this helps indicate to the user that the process is ongoing in case of a slow network.

Author: frederikb

package.json

@@ -2,7 +2,7 @@
 	"name": "bookmarksync",
 	"description": "Synchronize browser bookmarks from a GitHub repository",
 	"private": true,
-	"version": "0.9.0",
+	"version": "0.9.1",
 	"license": "MIT",
 	"type": "module",
 	"scripts": {

src/entrypoints/popup/popup.css

@@ -83,6 +83,13 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+button:disabled {
+	background-color: #757575;
+	color: #ccc;
+	cursor: not-allowed;
+	border: 1px solid #606060;
+	opacity: 0.7;
+}
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

src/entrypoints/popup/popup.js

@@ -5,11 +5,19 @@ import {getSyncBookmarks} from '@/utils/bookmarksync.js';
 const syncBookmarks = getSyncBookmarks();
 
 document.querySelector('#bookmarksync-logo').src = logo;
-document.querySelector('#sync-now').addEventListener('click', () => {
+
+const syncButton = document.querySelector('#sync-now');
+syncButton.addEventListener('click', async () => {
+	console.log('Manual sync triggered');
+	const originalText = syncButton.textContent;
+	syncButton.textContent = 'Synchronizing...';
+	syncButton.disabled = true;
 	try {
-		console.log('Manual sync triggered');
-		syncBookmarks(true);
+		await syncBookmarks(true);
 	} catch (error) {
 		console.error('Error triggering manual bookmark sync:', error);
+	} finally {
+		syncButton.disabled = false;
+		syncButton.textContent = originalText;
 	}
 });