From 0aa6681b1ecac02918fe8821fde8b0db56eee7d2 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 14 Oct 2025 03:23:29 +0200
Subject: [PATCH] [Perf] Sparkles: Pause when in background

---
 src/components/common/Sparkles.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Sparkles.tsx b/src/components/common/Sparkles.tsx
index d9e2dbf44..fc252e4b7 100644
--- a/src/components/common/Sparkles.tsx
+++ b/src/components/common/Sparkles.tsx
@@ -1,8 +1,10 @@
-import { memo } from '../../lib/teact/teact';
+import { memo, useEffect, 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 = {
@@ -89,9 +91,19 @@ const Sparkles = ({
   noAnimation,
   ...presetSettings
 }: 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
+        ref={ref}
         className={buildClassName(styles.root, styles.button, className, noAnimation && styles.noAnimation)}
         style={style}
       >
@@ -121,7 +133,7 @@ const Sparkles = ({
 
   if (presetSettings.preset === 'progress') {
     return (
-      <div className={buildClassName(styles.root, styles.progress, className)} style={style}>
+      <div ref={ref} className={buildClassName(styles.root, styles.progress, className)} style={style}>
         {PROGRESS_POSITIONS.map((position) => {
           return (
             <div