From 1629bc0aaeacb3c2cb50e99d04e59138d223897d Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 9 Nov 2023 15:39:18 +0200
Subject: [PATCH] refactor: useMemo instead for better performance

---
 src/routes/MetaDetails/StreamsList/StreamsList.js | 9 ++++-----
 src/routes/MetaDetails/StreamsList/styles.less    | 1 +
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index 3a17e2a7c..ae7d2416e 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -22,10 +22,9 @@ const StreamsList = ({ className, video, ...props }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
-    const countLoadingStreams = () => {
+    const countLoadingAddons = React.useMemo(() => {
         return props.streams.filter((stream) => stream.content.type === 'Loading').length;
-    };
-    const loadingAddonsCount = countLoadingStreams();
+    }, [props.streams]);
     const streamsByAddon = React.useMemo(() => {
         return props.streams
             .filter((streams) => streams.content.type === 'Ready')
@@ -100,10 +99,10 @@ const StreamsList = ({ className, video, ...props }) => {
                             :
                             <React.Fragment>
                                 {
-                                    loadingAddonsCount > 0 ?
+                                    countLoadingAddons > 0 ?
                                         <div className={styles['addons-loading-container']}>
                                             <div className={styles['addons-loading']}>
-                                                {loadingAddonsCount} {t('MOBILE_ADDONS_LOADING')}
+                                                {countLoadingAddons} {t('MOBILE_ADDONS_LOADING')}
                                             </div>
                                             <span className={styles['addons-loading-bar']}></span>
                                         </div>
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index b935ec82f..55be6310b 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -63,6 +63,7 @@
             background-color: var(--primary-accent-color);
         }
     }
+
     .select-choices-wrapper {
         display: flex;
         align-items: center;