ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Perf] Sparkles: Pause when in background

Browse Source
This commit is contained in:
Alexander Zinchuk 2025-10-14 03:23:29 +02:00
parent d04c811f8f
commit 0aa6681b1e
1 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/common/Sparkles.tsx
View File

@ -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