From 105dc40b11414c7a126f90484a1ef1ac82df08d6 Mon Sep 17 00:00:00 2001
From: speyll <speyll@protonmail.com>
Date: Fri, 25 Apr 2025 01:42:53 +0100
Subject: [PATCH] optimized js

---
 static/js/script.js               | 52 +++++++++++++++----------------
 templates/shortcodes/youtube.html |  1 +
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/static/js/script.js b/static/js/script.js
index 2455f71..a5433f7 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -1,18 +1,18 @@
 class ThemeManager {
     constructor() {
-        // Cache DOM elements once
         this.toggle = document.getElementById('theme-toggle');
+        if (!this.toggle) return;
+        
         this.icon = document.getElementById('theme-icon');
-
-        // Get data attributes once
         const { iconBase, iconDark, iconLight, soundSrc } = this.toggle.dataset;
         this.iconBase = iconBase;
         this.iconDark = iconDark;
         this.iconLight = iconLight;
-
-        // Create audio element only when needed
-        this.sound = new Audio(soundSrc);
-
+        
+        // Create audio element lazily only when needed
+        this.sound = null;
+        this.soundSrc = soundSrc;
+        
         this.init();
     }
 
@@ -34,31 +34,31 @@ class ThemeManager {
         const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
         const newTheme = isDark ? 'light' : 'dark';
 
-        document.body.classList.add('theme-transition');
         document.documentElement.setAttribute('data-theme', newTheme);
-
-        // Use the inverse to update the icon to match the new theme
         this.updateIcon(!isDark);
-
         localStorage.setItem('theme', newTheme);
-
-        // Use requestAnimationFrame for better performance on transition
-        requestAnimationFrame(() => {
-            setTimeout(() => {
-                document.body.classList.remove('theme-transition');
-            }, 300);
-        });
-
-        this.sound.play().catch(() => {});
+        
+        // Lazy load sound only when needed
+        if (!this.sound && this.soundSrc) {
+            this.sound = new Audio(this.soundSrc);
+        }
+        
+        if (this.sound) {
+            this.sound.play().catch(() => {});
+        }
     }
 
-
-    // Extracted common functionality
     updateIcon(isDark) {
-        this.icon.setAttribute('href', 
-            `${this.iconBase}${isDark ? this.iconDark : this.iconLight}`);
+        if (this.icon) {
+            this.icon.setAttribute('href', 
+                `${this.iconBase}${isDark ? this.iconDark : this.iconLight}`);
+        }
     }
 }
 
-// Use modern syntax
-document.addEventListener('DOMContentLoaded', () => new ThemeManager());
+// Initialize when content is loaded
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => new ThemeManager());
+} else {
+    new ThemeManager();
+}
diff --git a/templates/shortcodes/youtube.html b/templates/shortcodes/youtube.html
index 51f44d4..576d33e 100644
--- a/templates/shortcodes/youtube.html
+++ b/templates/shortcodes/youtube.html
@@ -1,6 +1,7 @@
 <div {% if class %}class="{{class}}"{% endif %}>
     <iframe 
         src="https://www.youtube-nocookie.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}"
+        loading="lazy"
         frameborder="0" 
         allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
         webkitallowfullscreen