Merge pull request #506 from Stremio/feature/addons-loading-indicator

Feature/addons loading indicator
Stremio · Nov 9, 2023 · 2f62f57 · 2f62f57
2 parents db3d962 + 1629bc0
commit 2f62f57
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js
@@ -22,6 +22,9 @@ const StreamsList = ({ className, video, ...props }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
+    const countLoadingAddons = React.useMemo(() => {
+        return props.streams.filter((stream) => stream.content.type === 'Loading').length;
+    }, [props.streams]);
     const streamsByAddon = React.useMemo(() => {
         return props.streams
             .filter((streams) => streams.content.type === 'Ready')
@@ -95,6 +98,17 @@ const StreamsList = ({ className, video, ...props }) => {
                             </div>
                             :
                             <React.Fragment>
+                                {
+                                    countLoadingAddons > 0 ?
+                                        <div className={styles['addons-loading-container']}>
+                                            <div className={styles['addons-loading']}>
+                                                {countLoadingAddons} {t('MOBILE_ADDONS_LOADING')}
+                                            </div>
+                                            <span className={styles['addons-loading-bar']}></span>
+                                        </div>
+                                        :
+                                        null
+                                }
                                 <div className={styles['select-choices-wrapper']}>
                                     {
                                         video ?

diff --git a/src/routes/MetaDetails/StreamsList/styles.less b/src/routes/MetaDetails/StreamsList/styles.less
@@ -41,6 +41,29 @@
         }
     }
 
+    .addons-loading-container {
+        display: flex;
+        z-index: 1;
+        overflow: visible;
+        margin: 2em 1em 0 1em;
+        gap: 1em;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .addons-loading {
+            color: var(--primary-foreground-color);
+            font-size: 1rem;
+        }
+
+        .addons-loading-bar {
+            width: 90%;
+            height: 0.3em;
+            border-radius: var(--border-radius);
+            background-color: var(--primary-accent-color);
+        }
+    }
+
     .select-choices-wrapper {
         display: flex;
         align-items: center;