Optimize lazy rendering and theme switching

static/app.js

@@ -558,17 +558,20 @@ function applyTheme() {
 
 function toggleTheme() {
   const animate = motionAllowed();
-  if (animate) document.body.classList.add("theme-transitioning");
+  DOM.resultsList.classList.add("theme-static");
   STATE.isDark = !STATE.isDark;
   applyTheme();
   localStorage.setItem("theme", STATE.isDark ? "dark" : "light");
+  requestAnimationFrame(() => DOM.resultsList.classList.remove("theme-static"));
   if (animate) {
-    document.body.classList.remove("theme-switching");
-    void document.body.offsetWidth;
-    document.body.classList.add("theme-switching");
-    window.setTimeout(() => {
-      document.body.classList.remove("theme-transitioning", "theme-switching");
-    }, 520);
+    document.querySelectorAll(".theme-icon-svg").forEach((icon) => {
+      icon.getAnimations().forEach((animation) => animation.cancel());
+      icon.animate([
+        { opacity: 0.15, transform: "rotate(-160deg) scale(0.5)" },
+        { opacity: 1, transform: "rotate(14deg) scale(1.16)", offset: 0.64 },
+        { opacity: 1, transform: "rotate(0) scale(1)" },
+      ], { duration: 520, easing: "cubic-bezier(0.05, 0.7, 0.1, 1)" });
+    });
   }
 }
 

static/style.css

@@ -556,16 +556,6 @@ body.preview-open #preview-panel .preview-header {
   display: block;
 }
 
-body.theme-switching .theme-icon-svg {
-  animation: theme-icon-turn 520ms var(--motion-emphasized-easing);
-}
-
-@keyframes theme-icon-turn {
-  0% { opacity: 0.15; transform: rotate(-160deg) scale(0.5); }
-  64% { opacity: 1; transform: rotate(14deg) scale(1.16); }
-  100% { opacity: 1; transform: rotate(0) scale(1); }
-}
-
 .preview-title {
   font-size: 15px;
   font-weight: 600;
@@ -1213,6 +1203,13 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
   transition: opacity var(--motion-standard), transform var(--motion-standard);
 }
 
+.results-list.theme-static,
+.results-list.theme-static *,
+.results-list.theme-static *::before,
+.results-list.theme-static *::after {
+  transition: none !important;
+}
+
 .snippet-loading {
   color: var(--on-surface-variant);
   opacity: 0.7;
@@ -1229,6 +1226,8 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
   padding: 10px 16px;
   border-bottom: 1px solid var(--outline-variant);
   transition: background var(--transition);
+  content-visibility: auto;
+  contain-intrinsic-size: auto 112px;
 }
 
 .result-item.result-enter {
@@ -2117,13 +2116,6 @@ input[type="checkbox"]:indeterminate {
   accent-color: var(--primary);
 }
 
-body.theme-transitioning,
-body.theme-transitioning *,
-body.theme-transitioning *::before,
-body.theme-transitioning *::after {
-  transition: background-color 240ms var(--motion-standard-easing), color 240ms var(--motion-standard-easing), border-color 240ms var(--motion-standard-easing), box-shadow 240ms var(--motion-standard-easing) !important;
-}
-
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.01ms !important;