add debouncing to selected theme

src/interface/components/ThemeCover.tsx

@@ -25,14 +25,17 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
   const handleThemeClick = async () => {
     if (isEditMode) return;
     if (downloaded) {
+      // move the theme from temporary storage to SEQTAs storage
       await sendThemeUpdate(theme as DownloadedTheme, true)
+      // remove from temp storage
       await browser.runtime.sendMessage({
         type: 'DeleteDownloadedTheme',
         body: theme.id
       })
+      // set it!
       setTheme(theme.id);
     } else {
-      console.log(theme)
+      console.debug(theme)
       onThemeSelect(theme.id);
     }
   };

src/interface/components/ThemeSelector.tsx

@@ -79,10 +79,20 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
   
   useEffect(() => {
     fetchThemes();
+
+    /* const interval = setInterval(() => {
+      console.log("Done!");
+      if (isLoading == true) {
+        fetchThemes();
+      } else {
+        clearInterval(interval);
+      }
+    }, 1000); */
   }, []);
 
   const handleThemeSelect = useCallback(
     async (themeId: string) => {
+      console.log(themeId === settingsState.selectedTheme);
       if (themeId === settingsState.selectedTheme) {
         await disableTheme();
         setSelectedTheme('');

src/seqta/utils/listeners/StorageListener.ts

@@ -1,4 +1,5 @@
 import browser from 'webextension-polyfill'
+import { debounce } from 'lodash';
 
 import {
   CreateBackground,
@@ -11,13 +12,18 @@ import {
 } from '../../../SEQTA';
 import { updateBgDurations } from '../../ui/Animation';
 import { getDarkMode, updateAllColors } from '../../ui/colors/Manager';
-import { appendBackgroundToUI } from '../../ui/ImageBackgrounds';
+//import { appendBackgroundToUI } from '../../ui/ImageBackgrounds';
+import { setTheme } from '../../ui/themes/setTheme';
+import { disableTheme } from '../../ui/themes/disableTheme';
 
 
 export default class StorageListener {
   darkMode: any;
+  debouncedSetTheme: any;
+  
   constructor() {
     this.darkMode = getDarkMode();
+    this.debouncedSetTheme = debounce(this.applyTheme, 300); // 300 ms debounce period
     browser.storage.onChanged.addListener(this.handleStorageChanges.bind(this));
   }
 
@@ -82,8 +88,8 @@ export default class StorageListener {
         }
         break;
       
-      case 'theme':
+      case 'selectedTheme':
-        console.log(changes.theme.newValue)
+        this.debouncedSetTheme(changes.selectedTheme.newValue);
         break;
 
       default:
@@ -92,6 +98,14 @@ export default class StorageListener {
     });
   }
 
+  applyTheme(theme: string) {
+    if (theme === '') {
+      disableTheme();
+    } else {
+      setTheme(theme);
+    }
+  }
+
   handleSelectedColorChange(newColor: any) {
     try {
       updateAllColors(this.darkMode, newColor);