From 980fb6ef41f44585da54a4a66ad2259620e3565c Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 15 Oct 2025 19:57:16 +0200
Subject: [PATCH] [Perf] Pause all CSS animations when in background

---
 src/components/App.tsx                         | 16 ++++++++++++----
 src/components/common/DotAnimation.scss        |  4 ++++
 src/components/common/MediaSpoiler.module.scss |  8 ++++++--
 src/components/common/Sparkles.module.scss     | 12 ++++++++----
 src/components/common/Sparkles.tsx             | 11 +----------
 src/components/common/spoiler/Spoiler.scss     |  4 ++++
 src/components/ui/Spinner.scss                 |  4 ++++
 src/components/ui/placeholder/Skeleton.scss    |  4 ++++
 src/components/ui/placeholder/Skeleton.tsx     |  5 +++--
 9 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index fdde35eca..df3066990 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -6,10 +6,8 @@ import type { GlobalState } from '../global/types';
 import type { ThemeKey } from '../types';
 import type { UiLoaderPage } from './common/UiLoader';
 
-import {
-  DARK_THEME_BG_COLOR, INACTIVE_MARKER, LIGHT_THEME_BG_COLOR, PAGE_TITLE,
-  PAGE_TITLE_TAURI,
-} from '../config';
+import { DARK_THEME_BG_COLOR, INACTIVE_MARKER, LIGHT_THEME_BG_COLOR, PAGE_TITLE, PAGE_TITLE_TAURI } from '../config';
+import { forceMutation } from '../lib/fasterdom/stricterdom.ts';
 import { selectTabState, selectTheme } from '../global/selectors';
 import { IS_TAURI } from '../util/browser/globalEnvironment';
 import { IS_INSTALL_PROMPT_SUPPORTED, PLATFORM_ENV } from '../util/browser/windowEnvironment';
@@ -24,6 +22,8 @@ import { updateSizes } from '../util/windowSize';
 import useTauriDrag from '../hooks/tauri/useTauriDrag';
 import useAppLayout from '../hooks/useAppLayout';
 import usePrevious from '../hooks/usePrevious';
+import { useSignalEffect } from '../hooks/useSignalEffect.ts';
+import { getIsInBackground } from '../hooks/window/useBackgroundMode.ts';
 
 // import Test from './test/TestLocale';
 import Auth from './auth/Auth';
@@ -226,6 +226,14 @@ const App: FC<StateProps> = ({
     );
   }, [theme]);
 
+  const getIsInBackgroundLocal = getIsInBackground;
+  useSignalEffect(() => {
+    // Mutation forced to avoid RAF throttling in background
+    forceMutation(() => {
+      document.body.classList.toggle('in-background', getIsInBackgroundLocal());
+    }, document.body);
+  }, [getIsInBackgroundLocal]);
+
   return (
     <UiLoader page={page} isMobile={isMobile}>
       <Transition
diff --git a/src/components/common/DotAnimation.scss b/src/components/common/DotAnimation.scss
index 7e3776fed..9282ed1a8 100644
--- a/src/components/common/DotAnimation.scss
+++ b/src/components/common/DotAnimation.scss
@@ -15,6 +15,10 @@
       html[lang="fa"] & {
         animation-name: dot-animation-rtl;
       }
+
+      body.in-background & {
+        animation-play-state: paused;
+      }
     }
   }
 }
diff --git a/src/components/common/MediaSpoiler.module.scss b/src/components/common/MediaSpoiler.module.scss
index 9ba2b0ec0..f64725bb5 100644
--- a/src/components/common/MediaSpoiler.module.scss
+++ b/src/components/common/MediaSpoiler.module.scss
@@ -78,7 +78,6 @@
   transition: transform 500ms ease-in;
 
   &::before {
-
     --x-direction: 0;
     --y-direction: var(--background-size);
 
@@ -99,7 +98,6 @@
   }
 
   &::after {
-
     --x-direction: calc(-1 * var(--background-size));
     --y-direction: calc(-1 * var(--background-size));
 
@@ -143,6 +141,12 @@
   }
 }
 
+:global(body.in-background) .dots {
+  &, &::before, &::after {
+    animation-play-state: paused;
+  }
+}
+
 @keyframes dots-animation {
   0% {
     background-position: 0 0;
diff --git a/src/components/common/Sparkles.module.scss b/src/components/common/Sparkles.module.scss
index a7dfe409b..d29177e27 100644
--- a/src/components/common/Sparkles.module.scss
+++ b/src/components/common/Sparkles.module.scss
@@ -30,11 +30,15 @@
 
   animation: sparkle 5s infinite;
   animation-delay: var(--_duration-shift);
-}
 
-.noAnimation .symbol {
-  opacity: 0.5;
-  animation: none;
+  .noAnimation & {
+    opacity: 0.5;
+    animation: none;
+  }
+
+  :global(body.in-background) & {
+    animation-play-state: paused;
+  }
 }
 
 @keyframes sparkle {
diff --git a/src/components/common/Sparkles.tsx b/src/components/common/Sparkles.tsx
index fc252e4b7..9ee4500be 100644
--- a/src/components/common/Sparkles.tsx
+++ b/src/components/common/Sparkles.tsx
@@ -1,10 +1,8 @@
-import { memo, useEffect, useRef } from '../../lib/teact/teact';
+import { memo, useRef } from '../../lib/teact/teact';
 
 import buildClassName from '../../util/buildClassName';
 import buildStyle from '../../util/buildStyle';
 
-import { getIsInBackground } from '../../hooks/window/useBackgroundMode.ts';
-
 import styles from './Sparkles.module.scss';
 
 type ButtonParameters = {
@@ -93,13 +91,6 @@ const Sparkles = ({
 }: OwnProps) => {
   const ref = useRef<HTMLDivElement>();
 
-  const getIsInBackgroundLocal = getIsInBackground;
-  useEffect(() => {
-    (Array.from(ref.current!.children) as HTMLDivElement[]).forEach((sparkleEL) => {
-      sparkleEL.style.animationPlayState = getIsInBackgroundLocal() ? 'paused' : 'running';
-    });
-  }, [getIsInBackgroundLocal]);
-
   if (presetSettings.preset === 'button') {
     return (
       <div
diff --git a/src/components/common/spoiler/Spoiler.scss b/src/components/common/spoiler/Spoiler.scss
index 8eacba846..1d6e6bb7c 100644
--- a/src/components/common/spoiler/Spoiler.scss
+++ b/src/components/common/spoiler/Spoiler.scss
@@ -20,6 +20,10 @@
 
   &--animated {
     animation: pulse-opacity-light 1.75s linear infinite;
+
+    :global(body.in-background) & {
+      animation-play-state: paused;
+    }
   }
 
   &__content {
diff --git a/src/components/ui/Spinner.scss b/src/components/ui/Spinner.scss
index 5d7f19e4d..e29149be8 100644
--- a/src/components/ui/Spinner.scss
+++ b/src/components/ui/Spinner.scss
@@ -93,6 +93,10 @@
   animation-duration: 1s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
+
+  :global(body.in-background) & {
+    animation-play-state: paused;
+  }
 }
 
 @keyframes spin {
diff --git a/src/components/ui/placeholder/Skeleton.scss b/src/components/ui/placeholder/Skeleton.scss
index b5d550b0b..c42591d5d 100644
--- a/src/components/ui/placeholder/Skeleton.scss
+++ b/src/components/ui/placeholder/Skeleton.scss
@@ -73,4 +73,8 @@
       }
     }
   }
+
+  :global(body.in-background) &::before {
+    animation-play-state: paused;
+  }
 }
diff --git a/src/components/ui/placeholder/Skeleton.tsx b/src/components/ui/placeholder/Skeleton.tsx
index 50035e686..0167f8003 100644
--- a/src/components/ui/placeholder/Skeleton.tsx
+++ b/src/components/ui/placeholder/Skeleton.tsx
@@ -1,4 +1,5 @@
-import type { FC } from '../../../lib/teact/teact';
+import type { FC } from '@teact';
+import { memo } from '@teact';
 
 import buildClassName from '../../../util/buildClassName';
 import buildStyle from '../../../util/buildStyle';
@@ -36,4 +37,4 @@ const Skeleton: FC<OwnProps> = ({
   );
 };
 
-export default Skeleton;
+export default memo(Skeleton);