improve theme selection + bug fixes

src/interface/components/ThemeSelector.tsx

@@ -11,7 +11,8 @@ import SpinnerIcon from './LoadingSpinner';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import useVisibility from './useVisibility';
-import { debounce } from 'lodash';
+import { debounce, throttle } from 'lodash';
+import { Mutex } from '../../seqta/utils/mutex';
 
 interface ThemeSelectorProps {
   isEditMode: boolean;
@@ -30,6 +31,8 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
     threshold: 0.1, // 10% of the element needs to be visible
   });
 
+  const mutex = new Mutex();
+
   const setSelectedTheme = (themeId: string) => {
     setSettingsState((prevState: SettingsState) => ({
       ...prevState,
@@ -114,21 +117,29 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
 
   const handleThemeSelect = useCallback(
     async (themeId: string) => {
-      if (themeId === settingsState.selectedTheme) {
-        await disableTheme();
-        setSelectedTheme('');
-      } else {
-        const selectedTheme = themes.find((theme) => theme.id === themeId);
-        if (selectedTheme) {
-          await setTheme(selectedTheme.id);
-          setSelectedTheme(themeId);
+      const unlock = await mutex.lock();
+      try {
+        if (themeId === settingsState.selectedTheme) {
+          await disableTheme();
+          setSelectedTheme('');
+        } else {
+          const selectedTheme = themes.find((theme) => theme.id === themeId);
+          if (selectedTheme) {
+            await setTheme(selectedTheme.id);
+            setSelectedTheme(themeId);
+          }
         }
+      } finally {
+        unlock();
       }
     },
     [settingsState.selectedTheme, themes]
   );
 
-  const handleThemeSelectDebounced = debounce(handleThemeSelect, 50);
+  const handleThemeSelectDebounced = useCallback(
+    debounce(handleThemeSelect, 100),
+    [handleThemeSelect]
+  );
 
   const handleThemeDelete = useCallback(
     async (themeId: string) => {