Merge pull request #646 from ContriFork/fix/theme-toggle-flickering

Fix flickering when toggling theme #643

Author: prototypa

src/components/common/BasicScripts.astro

@@ -68,6 +68,9 @@ import { UI } from 'astrowind:config';
       if (defaultTheme.endsWith(':only')) {
         return;
       }
+
+      Observer.removeAnimationDelay();
+      
       document.documentElement.classList.toggle('dark');
       localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
     });
@@ -167,6 +170,7 @@ import { UI } from 'astrowind:config';
     observer: null,
     delayBetweenAnimations: 100,
     animationCounter: 0,
+    elements: null,
 
     start() {
       const selectors = [
@@ -179,7 +183,7 @@ import { UI } from 'astrowind:config';
         '[class$=" intersect"]',
       ];
 
-      const elements = Array.from(document.querySelectorAll(selectors.join(',')));
+      this.elements = Array.from(document.querySelectorAll(selectors.join(',')));
 
       const getThreshold = (element) => {
         if (element.classList.contains('intersect-full')) return 0.99;
@@ -188,7 +192,7 @@ import { UI } from 'astrowind:config';
         return 0;
       };
 
-      elements.forEach((el) => {
+      this.elements.forEach((el) => {
         el.setAttribute('no-intersect', '');
         el._intersectionThreshold = getThreshold(el);
       });
@@ -241,10 +245,25 @@ import { UI } from 'astrowind:config';
 
       this.observer = new IntersectionObserver(callback.bind(this), { threshold: [0, 0.25, 0.5, 0.99] });
 
-      elements.forEach((el) => {
+      this.elements.forEach((el) => {
         this.observer.observe(el);
       });
     },
+
+    /* 
+      REF: #643;
+      We need to remove the delay to fix flickering/delay
+      when toggling the theme. Observer only removes them
+      after data-animated is gone (out of view).
+    */
+    removeAnimationDelay() {
+      this.elements.forEach((el) => {
+        if (el.getAttribute('data-animated') === 'true') {
+          el.style.transitionDelay = '';
+          el.style.animationDelay = '';
+        }
+        });
+    },
   };
 
   Observer.start();