From 1975936eed5cf6075f7faae5589623f68714f5de Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Tue, 28 Nov 2023 12:34:54 +0200
Subject: [PATCH] refactor: add delay to the loading addons popup

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

diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
index 602baf0f5..aed479674 100644
--- a/src/routes/MetaDetails/StreamsList/StreamsList.js
+++ b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -19,6 +19,15 @@ const StreamsList = ({ className, video, ...props }) => {
     const streamsContainerRef = React.useRef(null);
     const scrollHeightRef = React.useRef(null);
     const [isScrollable, setIsScrollable] = React.useState(false);
+    const [isActive, setIsActive] = React.useState(false);
+    React.useEffect(() => {
+        if (countLoadingAddons > 0) {
+            const timer = setTimeout(() => setIsActive(true), 300);
+            return () => clearTimeout(timer);
+        } else {
+            setIsActive(false);
+        }
+    }, [countLoadingAddons]);
     const onAddonSelected = React.useCallback((event) => {
         setSelectedAddon(event.value);
     }, []);
@@ -161,7 +170,7 @@ const StreamsList = ({ className, video, ...props }) => {
                                         isScrollable && countLoadingAddons === 0 ?
                                             <React.Fragment>
                                                 <hr className={styles['line']} />
-                                                <div className={classnames(styles['to-top-wrapper'], isScrollable ? styles['active'] : null)} onClick={scrollToTop}>
+                                                <div className={styles['to-top-wrapper']} onClick={scrollToTop}>
                                                     <Icon className={styles['icon']} name={'chevron-up'} />
                                                     <div className={styles['label']}>Back to Top</div>
                                                 </div>
@@ -176,7 +185,7 @@ const StreamsList = ({ className, video, ...props }) => {
                                 </div>
                             </React.Fragment>
             }
-            <div className={classnames(styles['addons-loading-container'], countLoadingAddons > 0 ? styles['active'] : null)}>
+            <div className={classnames(styles['addons-loading-container'], { [styles.active]: countLoadingAddons > 0 && isActive })}>
                 <div className={styles['addons-loading']}>
                     {countLoadingAddons} {t('MOBILE_ADDONS_LOADING')}
                 </div>
diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
index b76b0c24b..caa9ce011 100644
--- a/src/routes/MetaDetails/StreamsList/styles.less
+++ b/src/routes/MetaDetails/StreamsList/styles.less
@@ -15,6 +15,7 @@
 
     .message-container {
         flex: 0 1 auto;
+        flex-grow: 1;
         align-self: stretch;
         display: flex;
         flex-direction: column;
@@ -45,7 +46,6 @@
         display: flex;
         z-index: 1;
         overflow: visible;
-        margin: 0;
         gap: 1em;
         flex-direction: column;
         justify-content: center;
@@ -53,8 +53,9 @@
         max-height: 0rem;
         min-height: 0rem;
         opacity: 0;
-        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, min-height 0.5s ease-in-out, margin 0.5s ease-in-out;
+        margin: 0;
         overflow: hidden;
+        transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, min-height 0.5s ease-in-out, margin 0.5s ease-in-out;
 
         .addons-loading {
             color: var(--primary-foreground-color);
@@ -71,8 +72,8 @@
         &.active {
             min-height: 3rem;
             max-height: 3rem;
-            margin: 2em 1em;
             opacity: 1;
+            margin: 2em 1em;
         }
     }