refactor: add delay to the loading addons popup

Stremio · Nov 28, 2023 · 1975936 · 1975936
1 parent c6f8460
commit 1975936
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git 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
@@ -15,6 +15,7 @@
 
     .message-container {
         flex: 0 1 auto;
+        flex-grow: 1;
         align-self: stretch;
         display: flex;
         flex-direction: column;
@@ -45,16 +46,16 @@
         display: flex;
         z-index: 1;
         overflow: visible;
-        margin: 0;
         gap: 1em;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         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;
         }
     }